Javascript 弹性文本字段

CSS:

所有这些都是有效的，但我不是很满意。正如您所看到的，实际的文本表示比文本字段边界小得多。这是随着文本变长而发音的。是否有任何css技巧来最小化此偏移

您可以查看示例页面

---

非常感谢

如果使用比例字体，则字段的大小只有在以固定单位（如

size

属性（或CSS的

em

单位）给出时才会大致正确。您可以通过将

输入的字体设置为单倍行距来缓解这种情况，但这显然有一些缺点

我所知道的实现高质量的唯一解决方案包括一个屏幕外元素（a
span
很好），它可以自动增长，然后将该div的大小映射到元素的大小


更新：这里有一个例子：抱歉，我没有手动计算宽度，因此出于示例的目的，我将jQuery添加到混合中。如果不使用jQuery，您应该能够使用您使用的库的功能（或
getComputedStyle
或类似功能）来获得相同的信息，即屏幕外跨度的结果宽度。值得注意的事项：


您需要给浏览器一点时间来调整
span
，因此
setTimeout
span
在页面最左侧关闭，以防止滚动条不必要地出现
我已经为
输入和
span
明确设置了相同的字体

如果使用比例字体，则字段的大小始终仅在以固定单位（如
size
属性（或CSS的
em
单位）给出时大致正确。您可以通过将
输入的字体设置为单倍行距来缓解这种情况，但这显然有一些缺点

我所知道的实现高质量的唯一解决方案包括一个屏幕外元素（a
span
很好），它可以自动增长，然后将该div的大小映射到元素的大小


更新：这里有一个例子：抱歉，我没有手动计算宽度，因此出于示例的目的，我将jQuery添加到混合中。如果不使用jQuery，您应该能够使用您使用的库的功能（或
getComputedStyle
或类似功能）来获得相同的信息，即屏幕外跨度的结果宽度。值得注意的事项：


您需要给浏览器一点时间来调整
span
，因此
setTimeout
span
在页面最左侧关闭，以防止滚动条不必要地出现
我已经为
输入和
span
明确设置了相同的字体

示例解决方案：

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

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

（当然，我直接进入了代码，但我只是想搜索，这与此相同。我一直坚持使用普通的旧DOM方法，但如果将来继续使用这种方法，它可能会很有用。）
示例解决方案：

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

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

（当然，我会直接进入代码，但我只是想搜索，这与此相同。我一直坚持使用普通的旧DOM方法，但如果您将来继续使用这种方法，它可能会很有用。）
我不会说这一切都起作用。试着按住一封信。或者，试着输入
w
很多次（每次按下并释放信件）。我不会说这一切都起作用了。试着按住一封信。或者，尝试多次输入
w
（每次按下并释放字母）。嗯，实际上，我喜欢TJ使用setTimeout的方法，它解决了删除整个字段的问题。我想他这次得到了饼干！如果您不想使用jQuery，那么
offsetWidth
属性得到了很好的支持，我建议您尝试使用
pre
元素，而不是
span
。（如果需要，请记住将
display:inline；
添加到resizer元素CSS中。）这是一个非常好的示例。非常感谢，它也改进了我对可能的代码结构的看法。我不知道您可以编写这样的代码：var something={label:value，…}如果您还可以让我参考更详细的文档，那就太棒了。非常感谢。我不知道对象初始值设定项的存在，但你找到了！我将它用作一种非常粗糙和现成的名称空间，因为
test
是函数的一个通用名称，可能会发生冲突；但是，您可能还想检查一下，像jQuery这样的库使用哪些库来“隐藏”它们的代码。我刚才使用的符号很容易受到影响，到时候会给你带来各种各样的痛苦和心痛！嗯，事实上，我喜欢TJ使用设置时间的方法
<form action="" method="">
<input name="title" type="text" maxlength="256" value="daniel"/>
<input name="description" type="text" maxlength="512" value="awesome"/>
</form>

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]);
}

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