我可以在 css 中设置初始文本输入大小，如下所示：
width: 50px;
但我希望它在我输入时增长，直到达到例如 200px。这可以在直接的 css、html 中完成，最好没有 javascript 吗？
当然也要发布您的 js/jquery 解决方案，但是如果没有它们也可以这样做 - 那就太好了。
我在这里尝试：
使 html 文本输入字段随着我的输入而增长？
IT技术
javascript
jquery
html
css
2021-01-21 06:36:56
6个回答
这是一个只有 CSS 和Content Editable的示例：
CSS
span
{
border: solid 1px black;
}
div
{
max-width: 200px;
}
HTML
<div>
<span contenteditable="true">sdfsd</span>
</div>
有关的重要说明 contenteditable
制作 HTML 元素contenteditable允许用户将复制的 HTML 元素粘贴到该元素内。这可能不适合您的用例，因此在选择使用它时请记住这一点。
我只是为你写的，我希望你喜欢它 :) 不能保证它是跨浏览器的，但我认为它是 :)
(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);
}
})();
如果您将 span 设置为 display: inline-block，自动水平和垂直调整大小效果很好：
<span contenteditable="true"
style="display: inline-block;
border: solid 1px black;
min-width: 50px;
max-width: 200px">
</span>如何以编程方式修改输入的 size 属性？
在语义上 (imo)，这个解决方案比公认的解决方案更好，因为它仍然使用输入字段作为用户输入，但它确实引入了一点点 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);
}
});
我想到了几件事：
onkeydown在文本字段中使用处理程序，测量文本*，并相应地增加文本框大小。
将:focuscss 类附加到具有较大宽度的文本框。那么你的盒子在聚焦时会更大。这不完全是你所要求的，但相似。
* 在 javascript 中测量文本并不简单。查看这个问题以获得一些想法。
其它你可能感兴趣的问题