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的宽度。

＆＃13;

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

＆＃13;

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

＆＃13;

<div id='a' contenteditable="true">Test</div>

＆＃13;

注意：像@Leon Adler所说，这种方式允许从其他程序粘贴图像，表格和格式。因此，在获得大小之前，您可能需要使用javascript验证内容。

<强>第二：

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

＆＃13;

var elemDiv = document.getElementById('a'),
  elemInput = document.getElementById('b');

elemInput.oninput = function() {
  elemDiv.innerText = elemInput.value;
  console.log(elemDiv.clientWidth + 'px');
}

＆＃13;

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

＆＃13;

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

＆＃13;

注意：为此，您必须在input和{{1}上拥有相同字体和字体大小 }标签。

Answer 2

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

请注意，输入和跨度必须具有相同的CSS样式才能准确。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

<强>更新

我想提出的两件事



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



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

<强> OLD

您可以尝试这种方法

添加范围并将其隐藏

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

然后onkeyup在隐藏的跨度上添加textfield的文字并获取其宽度。

借助观察的帮助

SNIPPET （更新）

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

SNIPPET （更新）

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

然后，将此行添加到frist函数：

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

输入时获取输入文本宽度

5 个答案:

我看到两种方式。