Question

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

Answer 1

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

true

浏览器支持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元素，将输入样式复制到其中并使用它的尺寸来调整输入大小。（选择多次使用this solution）。

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来跟随空格大小。

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

3 个答案: