是否使html文本输入字段随着我的键入而增长？
是否使html文本输入字段随着我的键入而增长？
提问于 2011-08-24 07:27:40
我可以在css中设置初始文本输入大小，如下所示：
width: 50px;但我希望当我输入时，它会增长，直到达到例如200px。这可以直接用css，html来实现吗，最好不要javascript？
当然，也要发布你的js/jquery解决方案，但如果没有它们也可以做到-那就太好了。
我在这里试试：
回答 11
Stack Overflow用户
发布于 2011-08-24 08:05:51
我只是为你写了这篇文章，希望你喜欢:)不能保证它是跨浏览器的，但我认为它是:)
(function(){
var min = 100, max = 300, pad_right = 5, input = document.getElementById('adjinput');
input.style.width = min+'px';
input.onkeypress = input.onkeydown = input.onkeyup = function(){
var input = this;
setTimeout(function(){
var tmp = document.createElement('div');
tmp.style.padding = '0';
if(getComputedStyle)
tmp.style.cssText = getComputedStyle(input, null).cssText;
if(input.currentStyle)
tmp.style.cssText = input.currentStyle.cssText;
tmp.style.width = '';
tmp.style.position = 'absolute';
tmp.innerHTML = input.value.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/"/g, """)
.replace(/'/g, "'")
.replace(/ /g, ' ');
input.parentNode.appendChild(tmp);
var width = tmp.clientWidth+pad_right+1;
tmp.parentNode.removeChild(tmp);
if(min <= width && width <= max)
input.style.width = width+'px';
}, 1);
}
})();Stack Overflow用户
发布于 2016-03-25 03:03:38
如果将跨度设置为display: inline-block，则自动调整水平和垂直大小的效果非常好：
<span contenteditable="true"
style="display: inline-block;
border: solid 1px black;
min-width: 50px;
max-width: 200px">
</span>
Stack Overflow用户
发布于 2013-10-19 00:09:54
如何以编程方式修改输入的size属性？
从语义上讲，这种解决方案比公认的解决方案更好，因为它仍然使用输入字段进行用户输入，但它确实引入了一些jQuery。Soundcloud为他们的标签做了类似的事情。
<input size="1" />
$('input').on('keydown', function(evt) {
var $this = $(this),
size = parseInt($this.attr('size'), 10),
isValidKey = (evt.which >= 65 && evt.which <= 90) || // a-zA-Z
(evt.which >= 48 && evt.which <= 57) || // 0-9
evt.which === 32;
if ( evt.which === 8 && size > 0 ) {
// backspace
$this.attr('size', size - 1);
} else if ( isValidKey ) {
// all other keystrokes
$this.attr('size', size + 1);
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7168727
复制相关文章
相似问题