打字时获取输入文本宽度

Question

我有一个输入类型的文本

<input type="text" id="txtid">

当我开始在输入中输入文本时，我应该能够获得输入文本的长度。

这是我试过的：

document.getElementById("txtid").offsetWidth;

和

var test = document.getElementById("txtid");
var width = (test.clientWidth + 1) + "px";

这两个没有给出输入文字的宽度

基本上我想要的是：

假设input text宽度是320px。我需要输入文本的宽度，即 120px，它在我输入时不断变化。

Answer 1

我看到两种方式。

第一的:

您可以使用内容可编辑的 div 而不是输入。像这样你可以看到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 标签上。

Answer 2

我稍微修改了 Chillers 的答案，因为看起来你想要的是宽度而不是字母数。我创建了一个跨度，它绝对位于屏幕之外。然后我将输入的值添加到它，然后获取跨度的宽度。为了让它更花哨，您可以使用 javascript 创建跨度。

请注意，为了确保准确，输入和跨度必须具有相同的 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>

Answer 3

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);

Answer 4

更新

我想提出两点

• 如果我们尝试使用 vanilla JS，则执行 display none 不会给你任何 offsetWidth。我们可以使用visibility: hidden; 或者 opacity:0 为此。

• 我们需要将overflow:auto添加到隐藏的span，否则如果文本超出浏览器窗口，文本将被扭曲到下一行 宽度和宽度将保持固定（窗宽)

老的

你可以试试这个方法

添加跨度并隐藏它

<span id="value"></span>

然后onkeyup在你的隐藏跨度上添加textfield的文本并获得它的宽度。

在 JQuery 的帮助下

片断(更新)

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>

Answer 5

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

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');