根据输入到字段中的字符数动态扩展输入类型“文本”的高度

小编典典

根据输入到字段中的字符数动态扩展输入类型“文本”的高度

css

类似于下面的JSFiddle（我将其添加为书签，并且不知道原始问题来自何处）：

<input type="text" value="" placeholder="Autosize" data-autosize-input='{ "space": 10 }' />

input {
    width: 200px;
    min-width: 200px;
    max-width: 300px;
    transition: width 0.25s;    
}

有没有一种方法可以将文本字段的宽度固定为例如200px，如果用户添加的文本超过200px可以容纳的文本的高度，文本字段的
高度会增加吗？如果用户需要更多空间来键入内容，我希望添加更多行…因此我需要 height 而不是width来动态调整大小。

谢谢！

阅读 459

2020-05-16

共1个答案

小编典典

正如其他人解释的那样，input字段不能包含多行文本，您应该使用它textarea来模仿输入字段，并使用jQuery使它自动垂直调整大小（具有固定宽度）。

JS ：

//This span is used to measure the size of the textarea
//it should have the same font and text with the textarea and should be hidden
var span = $('<span>').css('display','inline-block')
                      .css('word-break','break-all')
                      .appendTo('body').css('visibility','hidden');
function initSpan(textarea){
  span.text(textarea.text())
      .width(textarea.width())
      .css('font',textarea.css('font'));
}
$('textarea').on({
    input: function(){
       var text = $(this).val();      
       span.text(text);      
       $(this).height(text ? span.height() : '1.1em');
    },
    focus: function(){           
       initSpan($(this));
    },
    keypress: function(e){
       //cancel the Enter keystroke, otherwise a new line will be created
       //This ensures the correct behavior when user types Enter 
       //into an input field
       if(e.which == 13) e.preventDefault();
    }
});

CSS ：

textarea {
  width:200px;
  resize:none;
  overflow:hidden;
  font-size:18px;
  height:1.1em;
  padding:2px;
}

更新的演示：

这个新的更新的演示已修复了一些错误，并且还支持Enter键，最大高度限制，宽度不需要首先固定设置（相反，我们可以设置其最小宽度）。功能更加强大。

2020-05-16