使输入适应其文本答案

【问题标题】：Make an input adapt to its text使输入适应其文本
【发布时间】：2014-10-11 12:18:52
【问题描述】：

我尝试了不同的方法来使输入适应文本。我越接近 jQuery 是：$("div").attr("size", $("div").val().length );

我认为这适用于属性大小，但这似乎不能很好地衡量文本。似乎 size 可以很好地测量数字而不是文本：

<input type="text" id="first" name="first" size="11" value="this has 11">
<br>
<input type="text" id="second" name="second" size="11" value="12345678901">
<br>
<input type="text" id="third" name="third" size="22" value="this has 22 characters">

所以，当我在 jQuery 中使用 size 时：

$("#jQ").attr("size", $("#jQ").val().length );

HTML：

<input type="text" id="jQ" name="jQ" value="text, text, text">

下面是玩的例子：http://jsfiddle.net/auk7g40m/

有没有更好的方法让输入适应其文本？

【问题讨论】：

小提琴链接坏了。
size 属性使用给定字体大小的平均字符宽度。如果你想要一个精确的宽度，你需要使用一个隐藏元素，更新一个输入并设置为相同的字体属性，然后从中获取宽度。
所以没有问题？您只是在寻找更好的选择。您应该在代码审查堆栈交换上发帖。
您希望输入根据其字符改变宽度？
@ramon，我希望输入根据字符进行更改。我想我以某种方式指定了字体和大小。

标签： jquery html html-input

【解决方案1】：

根据您的情况可能可行的另一种方法是使用 div 代替输入并添加 contenteditable 属性。

然后添加一些简单的 css 来创建输入元素的外观

FIDDLE（在“输入”中添加一些文本以查看它们的增长）

CSS

div {
    border: 1px solid gray;
    display: inline-block;
    margin: 10px 0; 
}

【讨论】：

【解决方案2】：

您可以做的是将输入的字体设置为等宽字体，以便所有字符具有相同的宽度。

【讨论】：

【解决方案3】：

除非您使用所有字符都具有相同宽度的单型字体，否则获取字符串宽度的最简单方法是将其附加到元素，并获取元素的宽度，如下所示

$("#jQ").css('width', function() {
    var el = $('<span />', {
        text : this.value, 
        css  : {left: -9999, position: 'relative'}
    }).appendTo('body');
    var w = el.css('width');
    el.remove();
    return w;
});

请注意，除非元素具有位置且不是静态的，否则设置元素的高度和宽度实际上并没有任何作用。

FIDDLE

要使宽度在按键按下时跟随按键，您只需将其包装在事件处理程序中

FIDDLE

【讨论】：

@Nrc - 这就是你需要一个事件处理程序的地方，我在答案中添加了两个小提琴，尝试第二个。
我在第二把小提琴中添加了更多文字
@Nrc - 你是说它不起作用，当你将文本添加到最后一个输入时，它的大小不会增加？
对不起，也许有什么我不明白的地方。我在这里试过：jsfiddle.net/auk7g40m/9
@Nrc - 对我来说似乎工作得很好？你用的是什么浏览器？

【解决方案4】：

你需要onKeyPress函数（iv只是将js添加到html本身作为示例）

<input id="first" type="text" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';">

【讨论】：

如果用户删除了所有字符，那就是你的功能有问题。
不是每个字母都有 8px 宽度。这取决于使用的字体