如何根据占位符文本调整输入字段的宽度？

Question

我有一个固定宽度的输入字段。 （例如：200px）和占位符文本有更多的字母。

如何根据占位符文本/宽度动态更改输入字段的宽度？

Answer 1

将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 "/>

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

您可以使用 javascript 或 jquery 来执行此操作，获取占位符的长度，然后将其分配给输入大小； JS 代码：

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

或者， jQuery：

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