是否使html文本输入字段随着我的键入而增长？
是否使html文本输入字段随着我的键入而增长？
提问于 2011-08-24 07:27:40
我可以在css中设置初始文本输入大小，如下所示：
width: 50px;但我希望当我输入时，它会增长，直到达到例如200px。这可以直接用css，html来实现吗，最好不要javascript？
当然，也要发布你的js/jquery解决方案，但如果没有它们也可以做到-那就太好了。
我在这里试试：
http://jsfiddle.net/jszjz/2/
回答 15
Stack Overflow用户
回答已采纳
发布于 2011-08-24 07:59:00
下面是一个仅包含CSS和的示例
CSS
span
{
border: solid 1px black;
}
div
{
max-width: 200px;
}HTML
<div>
<span contenteditable="true">sdfsd</span>
</div>关于contenteditable的重要说明
将HTML元素设为contenteditable可以让用户将复制的HTML元素粘贴到该元素中。这对于您的用例可能并不理想，因此在选择使用它时请牢记这一点。
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);
}
})();JSFiddle
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提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7168727
复制相关文章
相似问题
腾讯云开发者
