[Javascript] динамически увеличивать ширину текстового поля ввода типа в соответствии с введенными в него символами


Answers

Решение, подобное @Tejas ', но не требует, чтобы шрифт был монопространством:

Хитрость заключается в использовании scrollWidth , который дает нам общую длину строки даже в однострочных текстовых окнах без полосы прокрутки: https://stackoverflow.com/a/9312727/1869660

ПРИМЕЧАНИЕ. Я не мог заставить это работать в IE, где scrollWidth всегда возвращал 2 по какой-то причине ..

Некоторый код:

function expand(textbox) {
    if (!textbox.startW) { textbox.startW = textbox.offsetWidth; }

    var style = textbox.style;

    //Force complete recalculation of width
    //in case characters are deleted and not added:
    style.width = 0;

    var desiredW = textbox.scrollWidth;
    //Optional padding to reduce "jerkyness" when typing:
    desiredW += textbox.offsetHeight;

    style.width = Math.max(desiredW, textbox.startW) + 'px';
}

...

<input type="text" onkeyup="expand(this);" >

Пример JSFiddle

Question

У меня есть textbox котором пользователь может ввести любое количество символов, но я хочу, чтобы его ширина была увеличена динамически по отношению к введенным в нее символам .

Я сделал обходной путь, показанный ниже, и он работает частично, он будет увеличивать ширину динамически, но не настолько точен, и через некоторое время он будет скрывать прошлые введенные символы из-за моей плохой логики, применяемой в ней. Я просто дал дикое обрезание из 17 символов, чтобы начать приращение.

Он должен начинать инкремент ширины только в том случае, если число символов достигает конца текстового поля.

ОБНОВИТЬ:

Я хочу сделать видимыми все символы, введенные в поле, где по умолчанию текстовое поле скрывает введенные символы слева.

FIDDLE DEMO

HTML

<input type="text" id="txtbox" />

SCRIPT

$('#txtbox').keypress(function() {
    var txtWidth = $(this).width();
    var cs = $(this).val().length;

    if(cs>17){
       $(this).width(txtWidth+5);
    }
});