动态调整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;
}

小提琴

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中提供最小宽度

.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';
    }

});