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

Question

我不关心特定的技术，它可能是 JS、CSS 甚至是一些不标准和邪恶的 html 属性。 如果用户在右边框上键入，我只是希望input变得更大。

Answer 1

让浏览器使用contenteditable设置为true的div来计算宽度。

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

浏览器支持应该没有问题http://caniuse.com/#feat=contenteditable

Answer 2

也许其他人有更好的方法，但你可以试试这个：

示例：http: //jsfiddle.net/aAueA/1/

var input = document.getElementsByTagName('input')[0];

input.onkeypress = input.onkeydown = function() {
    this.size = ( this.value.length > 10 ) ? this.value.length : 10;
};

这会将其设置为最小大小 10 并在超过 10 个字符时扩展。

可能最适合使用固定宽度的字体：

input {
    font-family:Courier;
}

Answer 3

您还可以创建 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());
});

UPD：最好使用 pre 而不是 div 来跟踪空格大小。