Чтобы вычислить ширину текущего ввода, вам нужно встроить его во временный элемент span, прикрепить эту вещь к DOM, получить вычисленную ширину (в пикселях) с помощью свойства scrollWidth и удалить span снова. Конечно, вы должны убедиться, что в элементе input, а также в элементе span используется одно и то же семейство шрифтов, размер шрифта и т. Д. Поэтому я назначил им тот же класс.
Я прикрепил функцию к событию keyup, так как на keypress входной символ еще не добавлен к входу value, так что это приведет к неправильной ширине. К сожалению, я не знаю, как избавиться от прокрутки поля ввода (при добавлении символов в конец поля); он прокручивается, потому что символ добавляется и отображается до вызова adjustWidthOfInput(). И, как уже было сказано, я не могу сделать это наоборот, потому что тогда у вас будет значение поля ввода до того, как будет вставлен нажатый символ. Я постараюсь решить эту проблему позже.
Кстати, я проверял это только в Firefox (3.6.8), но я надеюсь, вы поймете.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Get/set width of <input></title>
<style>
body {
background: #666;
}
.input-element {
border: 0;
padding: 2px;
background: #fff;
font: 12pt sans-serif;
}
.tmp-element {
visibility: hidden;
white-space: pre;
}
</style>
</head>
<body>
<input id="theInput" type="text" class="input-element" value="1">
<script>
var inputEl = document.getElementById("theInput");
function getWidthOfInput() {
var tmp = document.createElement("span");
tmp.className = "input-element tmp-element";
tmp.innerHTML = inputEl.value.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');
document.body.appendChild(tmp);
var theWidth = tmp.getBoundingClientRect().width;
document.body.removeChild(tmp);
return theWidth;
}
function adjustWidthOfInput() {
inputEl.style.width = getWidthOfInput() + "px";
}
adjustWidthOfInput();
inputEl.onkeyup = adjustWidthOfInput;
</script>
</body>
</html>