输入时获取输入文本宽度

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

我稍微修改了 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 2

我看到了两种方法。

第一：

您可以使用内容可编辑的 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 3

更新

我想提出两点

• 如果我们尝试使用 vanilla JS，则显示 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 4

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 5

使用上面的解决方案，我把它变成了一个函数。

let getWidth = (fontSize, value) => {
  let div = document.createElement('div');
  div.innerHTML = 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');