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

我无法在此找到明确的答案，如果有我错过了一个，请原谅我。将HTML文本输入宽度动态调整为内容

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

我已经创建了下面的例子。目前，这些框比我的占位符文本大得多，导致了大量的空白空间，而且当我键入内容时显然是同样的事情。

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

HTML：

CSS：

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

span { 
    display: inline-block; 
} 

p { 
    font-family: arial; 
}

Fiddle

来源

2015-05-29 ObbyOss

还有就是要做到这一点没有什么好办法。您必须编写一个javascript函数来检查输入变化时字符串的长度，然后根据字符数*字符宽度来调整输入的宽度。它看起来像代码已经在这里：http://stackoverflow.com/questions/3392493/adjust-width-of-input-field-to-its-input。只需调整输入时的逻辑===''，然后根据占位符设置宽度 –

观察：您的姓名和年龄输入不应该有相同的ID。 –

可能的解决方案已经在这里讨论：http：// stackoverflow。com/questions/9328682/jquery-resizing-form-input-based-value-width –

使用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'; } });

来源

2015-05-29 04:22:00

观察：使用此代码，一旦文本被清除，文本框的宽度就不会恢复正常。 –

是@vimala你对我做这一部分也 –

@vimala现在检查这个更新的代码，如果出现任何错误让我知道：D –

一种可能的方式：

[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。

如果您需要表单的值，您将不得不采取一些技巧来提取值。

来源

2015-05-29 04:11:45

我其实很喜欢这种方法！ +1 – Incognito

好吧，你总是可以给它一个相关的类，然后循环所有那些基本上手动形式的seralize，然后你应该设置。 – Daemedeor

有趣的解决方案。从我+1。 –

凯文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 }); 
});

来源

2015-05-29 04:15:01

值得注意的是，div必须与输入的风格非常相似，否则这种方式不会奏效。想想字体大小，例如 –

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

回答

相关问题