javascript - flex 文本框

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 设置相同的字体