Как настроить ширину поля ввода на основе текста заполнителя?

Question

У меня есть поле ввода с фиксированной шириной.(Пример: 200px), а текст заполнителя содержит больше букв.

Как я могу динамически изменять ширину поля ввода на основе заполнителя text / width?

Answer 1

вы можете сделать это, используя javascript или jquery, получить длину заполнителя и затем назначить его для размера ввода; JS код:

input.setAttribute('size',input.getAttribute('placeholder').length);

или JQuery:

$("input[placeholder]").each(function () {
        $(this).attr('size', $(this).attr('placeholder').length);
    });

Answer 2

Вот ссылка на то, как вы можете это сделать - https://jsfiddle.net/4s03razg/

<div>
    <script>
        var prevLen = 50;
        window.resizeBox = function() {
            var elem = document.getElementById("resizable-input");
            if(elem.value && elem.value.length > 5) {
                prevLen += 10;
                elem.style.width = prevLen + "px";      
            }
        };

        function initializeBox() {
            var elem = document.getElementById("resizable-input");
            elem.style.width = prevLen + "px";
        }
        initializeBox();
    </script>
    <input id="resizable-input" type="text" onkeypress="resizeBox()"/>
</div>

Это всего лишь пример.Вы должны будете использовать правильные числа и события, чтобы вызвать изменение размера.И я думаю, вам лучше выбрать элемент, используя this в вызове метода через событие.

Answer 3

набор size в input

var inputs = document.getElementsByTagName('input');
for(i=0; i<inputs.length; i++){
    inputs[i].setAttribute('size',inputs[i].getAttribute('placeholder').length);
}

<input placeholder="I am a long text...I am a long text...I am a long text "/>