Получить ширину текста при вводе

У меня есть текст типа ввода

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

Когда я начинаю вводить текст внутри ввода, я должен иметь возможность получить длину введенного текста.

Это то, что я пробовал:

document.getElementById("txtid").offsetWidth;

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

Эти два не дают ширину введенного текста

В основном я хочу:

Предположим, что input text width - 320px. Мне нужна ширина введенного текста i.e 120px, который продолжает меняться при входе.

Ответы

Ответ 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>

Ответ 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>

Ответ 3

UPDATE

Две вещи, которые я хочу выдвинуть

Выполнение отображения none не даст вам никакого offsetWidth, если мы пытаемся использовать vanilla JS. мы можем использовать visibility: hidden; или opacity:0 для этого.

нам нужно добавить overflow:auto в скрытый span, иначе текст будет деформирован на следующую строку, если он превышает окно браузера ширина и ширина будут оставаться фиксированными (ширина окна)

OLD

Вы можете попробовать этот подход

Добавьте пробел и скройте его

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

а затем onkeyup добавить текст textfield в свой скрытый диапазон и получить его ширину.

С ПОМОЩЬЮ JQUERY

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>

Ответ 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);