搜索栏的宽度随着您的输入而扩展？

Question

我一直在试图找到一种方法来做到这一点，但也许这是不可能的...

有没有一种方法可以让你的搜索栏扩展到它的文本内容的宽度呢？所以当你输入时它会变得更宽。然后设计明智我想中心对准它，位置绝对提交按钮在右边，我做了一个模拟了什么，我试图解释......

我猜测它要么非常简单明显，要么过于复杂！

任何想法或帮助将是伟大的，谢谢！

PS，我好与按钮等帮助，只是表明，场景...

Answer 1

并不完美，但东西，你可以开始使用。

使用额外的<span>置于屏幕外以获取宽度。

<span id="offscreen"></span> 
#offscreen { 
    position:absolute; 
    top:-999em; 
    left:-999em 
} 

JS

var $test_span = $('#offscreen') 

var $input = $('input').keydown(function() { 
    var val = $input.val(); 
    $test_span.text(val); 
    $input.width($test_span.width() + 20);// add 20 for some padding 
}); 

DEMO