我看到了两种方法。

第一个：

您可以使用内容可编辑的div代替input。这样你就可以看到div的宽度。

var elemDiv = document.getElementById('a');

elemDiv.onblur = function() {
  console.log(elemDiv.clientWidth + 'px');
}

div {
  width: auto;
  display: inline-block;
}

<div id='a' contenteditable="plaintext-only">Test</div>

注意：就像@Leon Adler说的，这种方式允许从其他程序粘贴图像，表格和格式。因此，您可能需要使用JavaScript进行一些验证，以便在获取大小之前检查内容。
第二次：

使用输入类型文本并将内容粘贴到不可见的div中。你可以看到不可见的div的宽度。

var elemDiv = document.getElementById('a'),
  elemInput = document.getElementById('b');

elemInput.oninput = function() {
  elemDiv.innerText = elemInput.value;
  console.log(elemDiv.clientWidth + 'px');
}

.div {
  width: auto;
  display: inline-block;
  visibility: hidden;
  position: fixed;
  overflow:auto;
}

<input id='b' type='text'>
<div id='a' class='div'></div>

注意：input和div标签的字体和字号必须相同。

我稍微修改了冷却器的答案，因为看起来你想要的是宽度而不是字母数。我已经创建了一个跨度，这是绝对定位的屏幕。然后我将输入的值添加到它，然后得到跨度的宽度。为了使它更花哨，你可以用javascript创建span。
请注意，输入和span必须具有相同的CSS样式，这样才能准确。

document.getElementById("txtid").addEventListener("keyup", function(){
  var mrspan = document.getElementById("mrspan");
  mrspan.innerText = this.value;
  console.log(mrspan.offsetWidth + "px");
});

<input type="text" id="txtid">
<span id="mrspan" style="position:absolute;left:-100%;"></span>

Canvas measureText()方法在这种情况下可能会有所帮助。每当需要获取文本宽度时，请调用以下函数：

function measureMyInputText() {
    var input = document.getElementById("txtid");
    var c = document.createElement("canvas");
    var ctx = c.getContext("2d");
    var txtWidth = ctx.measureText(input.value).width;

    return txtWidth;
}

为了获得更准确的结果，您可以为画布设置字体样式，特别是在为输入设置某些字体属性时。使用以下函数获取输入字体：

function font(element) {
     var prop = ["font-style", "font-variant", "font-weight", "font-size", "font-family"];
     var font = "";
     for (var x in prop)
         font += window.getComputedStyle(element, null).getPropertyValue(prop[x]) + " ";

     return font;
 }

然后，将这一行添加到第一个函数：

ctx.font = font(input);

更新

我想提出两点

• 如果我们尝试使用vanilla JS，执行display none不会给予您任何offsetWidth。我们可以使用visibility: hidden;或opacity:0来实现。
• 我们需要将overflow:auto添加到隐藏的span中，否则文本将被扭曲到下一行，如果它超过浏览器窗口宽度，宽度将保持固定（* 窗口宽度 *）
  旧

你可以试试这种方法
添加跨度并隐藏它
<span id="value"></span>
然后onkeyup将textfield的文本添加到隐藏的span上并获得其宽度。

在杰奎里的帮助下
快照（* 已更新 *）

function update(elm,value) {
     $('#value').text(value);
     var width =   $('#value').width();
     $('#result').text('The width of '+ value +' is '+width +'px');
   
}

#value{
  display:none;
  overflow:auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" oninput='update(this,this.value)'>
<span id="value"></span>
<div id="result"></div>

仅使用JS
快照（* 已更新 *）

function update(elm,value) {
     var span = document.getElementById('value');
     span.innerHTML = value;    
     var width = span.offsetWidth;
     document.getElementById('result').innerHTML = 'The width of '+ value +' is '+ width+ 'px';
   
}

#value{
  opacity:0;
  overflow:auto;
}

<input type="text" oninput='update(this,this.value)'>
<span id="value"></span>
<div id="result"></div>

使用上面的解决方案，我把它变成了一个单一的功能。

let getWidth = (fontSize, value) => {
  let div = document.createElement('div');
  div.innerText = value;
  div.style.fontSize = fontSize;
  div.style.width = 'auto';
  div.style.display = 'inline-block';
  div.style.visibility = 'hidden';
  div.style.position = 'fixed';
  div.style.overflow = 'auto';
  document.body.append(div)
  let width = div.clientWidth;
  div.remove();
  return width;
};
getWidth('10px', 'test');

以下是我的方法：
我创建了一个假的'span'元素，它复制输入元素的所有字体样式，然后测量它的宽度

function measureInputValueWidth(input: HTMLInputElement): number {
  const span = document.createElement("span");
  span.style.whiteSpace = "pre";
  span.style.fontFamily = input.style.fontFamily;
  span.style.fontSize = input.style.fontSize;
  span.style.fontWeight = input.style.fontWeight;
  span.style.fontStyle = input.style.fontStyle;
  span.style.letterSpacing = input.style.letterSpacing;
  span.style.textTransform = input.style.textTransform;
  span.style.padding = input.style.padding;
  span.style.margin = input.style.margin;
  span.style.border = input.style.border;
  span.style.boxSizing = input.style.boxSizing;
  span.style.position = "absolute";
  span.style.left = "-9999px";
  span.style.top = "-9999px";
  span.innerText = input.value;
  document.body.appendChild(span);
  const width = span.getBoundingClientRect().width;
  document.body.removeChild(span);
  return width;
}

function updateInputWidthToMatchValue(input: HTMLInputElement) {
  input.style.width = `${measureInputValueWidth(input)}px`;
}