javascript - 根据输入字段的字符数动态扩展输入类型 "text"的高度

Question

与下面的 JSFiddle 类似(我已将其添加为书签，但不知道原始问题从哪里出现):

http://jsfiddle.net/mJMpw/6/

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

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

是否有办法将文本字段的宽度固定为(例如仅 200 像素)，并且如果用户添加更多内容，则文本字段的高度会增长超过200px的文字能够容纳吗？如果用户需要更多的打字空间，我希望添加更多行...所以我需要高度，而不是宽度，来动态调整大小。

谢谢!

Answer 1

更新[2]:

如scrollHeight始终等于height ，我们必须在scrollHeight之前将height设置为'1'，那么当我们删除字符时<textarea>自动调整:

$('textarea').on('keydown', function(e){
    if(e.which == 13) {e.preventDefault();}
}).on('input', function(){
    $(this).height(1);
    var totalHeight = $(this).prop('scrollHeight') - parseInt($(this).css('padding-top')) - parseInt($(this).css('padding-bottom'));
    $(this).height(totalHeight);
});

fiddle :

http://jsfiddle.net/mJMpw/551/

更新:

正如 friend 所说，<input type="text"/>没有换行符。我建议使用<textarea>是:

$('textarea').on({input: function(){
    var totalHeight = $(this).prop('scrollHeight') - parseInt($(this).css('padding-top')) - parseInt($(this).css('padding-bottom'));
    $(this).css({'height':totalHeight});
}
});

fiddle :

http://jsfiddle.net/mJMpw/548/

原始答案:

这非常丑陋，但你可以这样做:

$('input[type="text"]').on('keyup',function(){
    var text = $(this).val();
    var getWidth = $('<span class="getWidth" style="white-space:nowrap; width:auto;">' + text + '</span>').insertAfter(this);
    $(this).css({'width':getWidth.outerWidth()}).next('.getWidth').remove();
});

您必须为 .getWidth 指定相同的字体/填充属性，然后输入:

input, .getWidth {
    font-family:arial;
    font-size:12px;
    font-weight:normal;
    letter-spacing:normal;
    padding:3px;
}

fiddle :

http://jsfiddle.net/9SMRf/