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

Question

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

Answer 1

让浏览器使用divwith contenteditable设置为来计算宽度true.

<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 来遵循空格大小。