输入时获取输入文本宽度

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="true">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>

注意:为此,您必须在和标签上使用相同的字体和字体大小. inputdiv

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

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 4

UPDATE

我想提出两件事

• offsetWidth如果我们尝试使用vanilla JS,那么显示none将不会给你任何.我们可以使用visibility: hidden;或 opacity:0为此.

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

旧

你可以尝试这种方法

添加范围并隐藏它

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