Javascript 调整输入大小以适应其内容

我不关心特定的技术，它可能是JS、CSS，甚至是一些不标准和邪恶的html属性。如果用户输入的内容超出了正确的边框，我只想让

输入变得更大。
也许其他人有更好的方法，但您可以尝试以下方法：

示例：

这会将其设置为最小10个字符，如果超过10个字符，则会进行扩展

使用固定宽度字体可能效果最好：

input {
    font-family:Courier;
}

让浏览器通过使用
div
并将
contenteditable
设置为
true
来计算宽度

<div class="pseudo-input" contenteditable="true">Resizes to my content!</div>

根据我的内容调整大小！

浏览器支持应该没有问题
您还可以创建div元素，将输入样式复制到其中，并使用其尺寸调整输入大小。（选择多种用途）

var-input=$（'input'），
dummy=$（''）.appendTo（'body'）；
['font-size'、'font-style'、'font-weight'、'font-family'，
'行高'，'文本转换'，'字母间距'].forEach（函数（索引）{
css（index，input.css（index））；
});
on（'input'，function（）{
html（this.value）；
input.width（dummy.width（））；
});

UPD：最好使用pre而不是div来跟踪空间大小。
感谢此解决方案！不过，它不考虑连续的空格字符。我编辑了你的帖子，并在div中添加了“空白：pre”。另外，为了避免插入符号消失，可能需要额外增加几个像素的宽度。函数的更简洁版本：
this.size=Math.max（this.value.length，10）仅供参考，这允许未初始化的HTML输入，这是危险的，通常应该避免
<div class="pseudo-input" contenteditable="true">Resizes to my content!</div>

var input = $('input'),
    dummy = $('<div style="position:absolute; left: -1000%;">').appendTo('body');

['font-size', 'font-style', 'font-weight', 'font-family',
 'line-height', 'text-transform', 'letter-spacing'].forEach(function(index) {
    dummy.css(index, input.css(index));
});

input.on('input', function() {
   dummy.html(this.value);
   input.width(dummy.width());
});