javascript - 如何将输入元素的宽度 trim 为初始文本的大小？

Question

我可以将 input 元素的初始宽度设置得足够大以刚好包围初始文本吗？我想要实现的示例:Silverlight app example .

我试过设置 width 属性，但它没有给我想要的:

<input type="text" style ="width: auto;" value="Default value"></input>
<input type="text" style ="width: 2%;" value ="Longer default value"></input>
<input type="text" style ="width: 100%;"value="Default value"></input>

我得到过多的空白或文本被 chop 。

这可能吗？

我只针对 HTML5 浏览器(IE9+、Chrome、FF)，因此 CSS3 解决方案会很好。 Javascript 解决方案也很受欢迎。

谢谢

Answer 1

我认为最简单的解决方案是使用 jQuery 来设置宽度:

$.each($('input'), function(){
    $(this).css('width',(($(this).val().length) * 6 + 'px'));
});

乘以 6 似乎是默认字体的最佳选择。如果您使用自定义字体输入，您可能需要调整它。

演示:http://jsfiddle.net/2479t/