Question

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

我认为这适用于属性大小，但这似乎不能很好地衡量文本。似乎尺寸适用于衡量数字而非文本：

<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/

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

Answer 1

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

$("#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

Answer 2

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

Answer 3

根据您的具体情况，可能采用不同的方法是使用div而不是输入并添加contenteditable属性。

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

FIDDLE （在＆＃39;输入中添加一些文字＆＃39;看看它们是否会增长）

CSS

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

Answer 4

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

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

使输入适应其文本

4 个答案:

CSS