基于Michael的回答，我使用jQuery创建了自己的版本。我认为这是大多数答案的一个更简洁的版本，它似乎可以完成工作。

我和这里的大多数人做的是一样的事情，使用span来写入输入文本，然后得到宽度。然后，当动作keyup和blur被调用时，我设置宽度。

这是一个工作的代码依赖。这个代码依赖显示了如何将其用于多个输入字段。

HTML结构:

<input type="text" class="plain-field" placeholder="Full Name">
<span style="display: none;"></span>

jQuery:

function resizeInputs($text) {
    var text = $text.val().replace(/\s+/g, ' '),
        placeholder = $text.attr('placeholder'),
        span = $text.next('span');
        span.text(placeholder);
    var width = span.width();

    if(text !== '') {
        span.text(text);
    var width = span.width();
    }

    $text.css('width', width + 5);
};

上面的函数获取输入值，修剪多余的空格，并将文本设置为span以获得宽度。如果没有文本，则获取占位符并将其输入到span中。一旦它将文本输入到span中，它就会设置输入的宽度。宽度上的+ 5是因为如果没有它，在Edge浏览器中输入会被切断一小部分。

$('.plain-field').each(function() {
    var $text = $(this);
    resizeInputs($text);
});

$('.plain-field').on('keyup blur', function() {
    var $text = $(this);
    resizeInputs($text);
});

$('.plain-field').on('blur', function() {
    var $text = $(this).val().replace(/\s+/g, ' ');
    $(this).val($text);
});

如果这可以改进，请让我知道，因为这是我能想出的最干净的解决方案。

你可以在angularjs中使用内置的ng风格指令来做得更简单。

在你的html中:

  <input ng-style="inputStyle(testdata)" ng-model="testdata" />

在你的控制器中:

 $scope.testdata = "whatever";

 $scope.inputStyle = function(str) {
    var charWidth = 7;
    return  {"width": (str.length +1) * charWidth + "px" };
    };

在你的css中:

input { font-family:monospace; font-size:12px; }

调整charWidth以匹配字体的宽度。它看起来是7，字体大小为12px;

这是一个普通的JS和jQuery插件，我写的，将处理调整输入元素使用画布和字体大小/家族，以确定实际的字符串长度时，渲染。(只适用于> IE9, chrome, safari, firefox, opera和大多数其他主要的浏览器，已经实现了画布元素)。

普通JS：

function autoSize(input, o) {
    o || (o = {});
    o.on || (o.on = 'keyup');

    var canvas = document.createElement('canvas');
    canvas.setAttribute('style', 'position: absolute; left: -9999px');
    document.body.appendChild(canvas);

    var ctx = canvas.getContext('2d');

    input.addEventListener(o.on, function () {
        ctx.font = getComputedStyle(this,null).getPropertyValue('font');
        this.style.width = ctx.measureText(this.value + '  ').width + 'px';
    });
}

//Usage
autoSize(document.getElementById('my-input'));

jQuery插件:

$.fn.autoSize = function(o) {
  o = $.extend({}, {
    on: 'keyup'
  }, o);

  var $canvas = $('<canvas/>').css({position: 'absolute', left: -9999});
  $('body').append($canvas);

  var ctx = $canvas[0].getContext('2d');

  return this.on(o.on, function(){
    var $this = $(this);
    ctx.font = $this.css('font');
    $this.width(ctx.measureText($this.val()).width + 'px');
  })
}

//Usage:
$('#my-input').autoSize();

注意:这将不处理文本转换，行间距和字母间距，以及其他一些文本大小变化属性。要处理文本转换属性，请设置并调整文本值以匹配该属性。其他的可能相当直截了当。如果这开始获得一些吸引力，我会实施……

在现代浏览器版本中，CSS单元ch也是可用的。根据我的理解，它是一个与字体无关的单位，其中1ch等于任何给定字体中字符0(零)的宽度。

因此，通过绑定到输入事件，像下面这样简单的东西可以用作resize函数:

var input = document.querySelector('input');//获取输入元素 输入。addEventListener(“输入”,resizeInput);//在"input"事件上绑定"resizeInput"回调 resizeInput.call(输入);//立即调用函数 函数resizeInput() { This.style.width = this.value.length + "ch"; ｝ 输入{字体大小:1.3 em;填充:.5em;｝ < >标签文本 <输入> < / >标签

该示例将输入大小调整为值的长度+ 2个字符。

单位ch的一个潜在问题是，在许多字体(如Helvetica)中，字符“m”的宽度超过字符0的宽度，而字符“i”要窄得多。1ch通常比字符平均宽度宽，根据这篇文章，通常是20-30%左右。

这是一个特定于angular的答案，但这对我来说很有效，并且在简单性和易用性方面非常令人满意:

<input [style.width.ch]="value.length" [(ngModel)]="value" />

它通过Jani回答中的字符单位自动更新。

很简单:

oninput='this.style.width = (this.scrollWidth - N) + "px";'

其中N是某个数字(例子中的2，我正在开发的东西上的17)，这是由实验确定的。

减去N可以防止这个奇怪的多余空间在文本到达文本框的末尾之前很久就开始积累。

比较。请仔细注意在第一个字符之后大小是如何变化的。 < p >减去N: < / p > <input type="text" placeholder="enter lots of text here" oninput='this.style. "'> . width = (this.scrollWidth-2) + "px" <p>Not minus N:</p> <input type="text" placeholder="enter lots of text here" oninput='this.style. "width = (this.scrollWidth) + "px"