Сообщение от Malleys
|
|
Кто знает, как ещё проще?
|
Старая тема (6 лет назад подняли). Но если кому-то нужно поделюсь своим вариантом. Фишка в создании "теневого спана" - копии инпута. Браузер сам вычисляет ширину элемента в зависимости от названия шрифта, его размера и длины текстовой строки. Нам надо её просто взять.
Свойства стиля в <span> и <input> должны полностью совпадать (некоторые браузеры не наследуют в input font-family по inherit).
<html>
<style>
.inp {font-family:calibri,arial,sans-serif; font-size:1em; padding:.2px; background-color:#DDDDFF; border:1px solid #F00; min-width:1em}
</style>
<body>
<script>
function rsz()
{
setTimeout(function(){
var inp = document.getElementById('inp1');
var spa = document.getElementById('inp1copy');
///spa.innerText = inp.value; // так не учитывает пробелы
spa.innerText = inp.value.replace(/\s/ig, String.fromCharCode(160));
inp.style.width=spa.offsetWidth + 20; // 20px чтобы инпут не дергался при вводе нового символа
},0);
};
</script>
<input id="inp1" class="inp" style="width:10px" type="input" value="" onkeydown="rsz()" onpaste="rsz()" oncut="rsz()">
<span id="inp1copy" class="inp" style="position:absolute; left:-30000px; top:0px"> </span>
</body>
</html>