Question

我在这方面找不到明确的答案，如果有一个我错过了，请原谅。

我希望我的文本输入宽度能够自动调整到其中的内容大小。首先是占位符文本而不是某人输入的实际文本。

我已经创建了以下作为示例。目前，这些盒子比我的占位符文本大得多，造成了大量的空白区域，当我输入内容时，这显然是同样的事情。

我尝试过宽度自动，一些jQuery，以及我在互联网上找到的麻线和泡泡糖。但还没有任何工作。有什么想法吗？谢谢！

HTML：

<span><p>Hello, my name is </p></span>

<span><input type="text" id="input" class="form" placeholder="name"></span>

<span><p>. I am </p></span>

<span><input type="text" id="input" class="form" placeholder="age"></span>

    <span><p> years old.</p></span>

CSS：

.form {
    border: 0;
    text-align: center;
    outline: none;
}

span {
    display: inline-block;
}

p {
    font-family: arial;
}

Fiddle

Answer 1

一种可能的方式：

[contenteditable=true]:empty:before {
  content: attr(placeholder);
  color:gray;
}
/* found this online --- it prevents the user from being able to make a (visible) newline */
[contenteditable=true] br{
  display:none;
}

<p>Hello, my name is <span id="name" contenteditable="true" placeholder="name"></span>. I am <span id="age" contenteditable="true" placeholder="age"></span> years old.</p>

CSS的来源：http://codepen.io/flesler/pen/AEIFc。

如果您需要表单的值，则必须采取一些技巧来获取值。

Answer 2

甚至
使用onkeypress

请参阅此示例： http://jsfiddle.net/kevalbhatt18/yug04jau/7/

的

的
<input id="txt" placeholder="name" class="form" type="text" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';"></span>

的

对于占位符加载时使用jquery并应用占位符大小输入

的

的
$('input').css('width',((input.getAttribute('placeholder').length + 1) * 8) + 'px');

的

即使你可以使用 id 而不是输入，这只是一个例子，所以我使用 $（输入）

在css中提供min-width

的

的
.form { border: 1px solid black; text-align: center; outline: none; min-width:4px; }

的

修改：

如果您从输入框中删除所有文字，则会使用焦点
获取占位符值
示例：http://jsfiddle.net/kevalbhatt18/yug04jau/8/

的
的
$("input").focusout(function(){ if(this.value.length>0){ this.style.width = ((this.value.length + 1) * 8) + 'px'; }else{ this.style.width = ((this.getAttribute('placeholder').length + 1) * 8) + 'px'; } });

的

Answer 3

Kevin F是对的，没有本地方法可以做到。

如果你真的希望它发生，这是一种方法。

在代码中，放置文本的位置不可见。然后我们检索跨度的宽度。

https://jsfiddle.net/r02ma1n0/1/

var testdiv = $("#testdiv");
$("input").keydown( function(){
    var ME = $(this);
    //Manual Way
    //var px = 6.5;
    //var txtlength = ME.val().length;
    //$(this).css({width: txtlength * px });

   testdiv.html( ME.val() + "--");
   var txtlength = testdiv.width();
   ME.css({width: txtlength  }); 
});

Answer 4

尝试使用' 尺寸 '属性。即使清除文本，这也会有效。需要jQuery才能使用

<div>
    <input id="txt" type="text" style="max-width: 100%;" placeholder="name">
</div>
<script>
    $(document).ready(function() {
        var placeholderLen = $('#txt').attr('placeholder').length;
        // keep some default lenght
        placeholderLen = Math.max(5, placeholderLen);
        $('#txt').attr('size', placeholderLen);

        $('#txt').keydown(function() {
            var size = $(this).val().length;
            $(this).attr('size', Math.max(placeholderLen, size));
        });
    });
</script>

Answer 5

input.addEventListener('input', () => input.style.width = input.scrollWidth);

不幸的是，这只会增加输入的大小。如果删除字符，则大小不会减小。在某些情况下，这很好。

动态调整HTML文本输入宽度到内容

5 个答案: