弹性文本字段

Question

<form action="" method="">
<input name="title" type="text" maxlength="256" value="daniel"/>
<input name="description" type="text" maxlength="512" value="awesome"/>
</form>

JavaScript：

function resize(elem){
if(!elem.value.length) elem.size=1;
else elem.size=elem.value.length;
}


var elem=document.getElementsByTagName('input');
for(i in elem){
elem[i].addEventListener('keyup', function(){resize(this);}, false);
resize(elem[i]);
}

CSS：

input{
display:block;
font-size:12px;
}

所有这些都有效，但我不太满意。如您所见，实际文本表示比文本字段边界要小得多。这是随着文本变长而发音的。有没有什么 css 技巧来最小化这个偏移量？

您可以查看示例页面HERE

非常感谢！

Answer 1

如果您使用比例字体，则字段的大小只有在以size 属性（或CSS 的em 单位）等固定单位给出时才会大致正确。您可以通过将input 的字体设为等宽来缓解这种情况，但这显然有一些缺点。

我知道的唯一一种高质量的解决方案是允许自动增长的屏幕外元素（span 很好），然后将该 div 的大小映射到元素的大小。

---

更新：这是一个示例：http://jsfiddle.net/zUBar/5/ 抱歉，我不会手动计算宽度，因此出于示例的目的，我已将 jQuery 添加到组合中。如果你不使用 jQuery，你应该能够使用你使用的库的特性（或getComputedStyle 或类似的）来获取相同的信息，即屏幕外跨度的结果宽度。注意事项：

• 您需要给浏览器一点时间来调整span 的大小，因此setTimeout
• span 位于页面的最左侧，可防止不必要地出现滚动条
• 我为input 和span 明确设置了相同的字体

Answer 2

示例解决方案：http://jsfiddle.net/7Ubch/

不幸的是，size 属性相当不精确；通过style 属性设置元素的宽度更有意义。

Here's an example 的一种方法，它使用与输入元素相同字体的隐藏pre 元素来提供更准确的宽度。我使用了keydown 和keyup 事件，因为前者会在每次按键重复时触发。使用pre 元素意味着多个空格字符不会折叠。

（当然，我直接研究代码，但我只是想搜索和someone wrote a simple jQuery plugin，它与此做同样的工作。我坚持使用普通的旧 DOM 方法，但如果你去，它可能会很有用以后沿着这条路走。）