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

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>

对于 placeholder 加载时使用 jquery 并应用占位符 输入尺寸

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

即使您可以使用 id 代替输入，这只是一个示例，以便我 使用 $(输入)

并且在 css 中提供最小宽度

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

---

编辑：

---

如果您从输入框中删除所有文本，那么它将使用 focusout

获取占位符值

示例：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

input.addEventListener('input', event => event.target.style.width = event.target.scrollWidth + 'px');

不幸的是，这只会增加输入的大小。如果删除字符，大小不会减小。对于某些用例，这完全没问题。

Answer 4

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

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

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

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 5

尝试使用 'size' 属性。 即使您清除文本，这也将起作用。 需要 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>