我发现以下非常简单的方法可以在这个jsfiddle http://jsfiddle.net/tovic/gLhCk/中自动将textarea调整为文本高度:
function expandTextarea(id) {
document.getElementById(id).addEventListener('keyup', function() {
this.style.overflow = 'hidden';
this.style.height = 0;
this.style.height = this.scrollHeight + 'px';
}, false);
}
expandTextarea('txtarea');
body {
padding:50px;
}
textarea {
margin:0px 0px;
padding:5px;
height:16px;
line-height:16px;
width:96%;
display:block;
margin:0px auto;
}
<textarea id="txtarea" spellcheck="false" placeholder="Statusku..."></textarea>
但是,我在我的项目中使用bootstrap,这引入了问题。
我尝试删除浏览器的HTML检查器中的所有引导类但问题仍然存在。有谁知道如何解决这个问题?
这是添加bootstrap的CSS时的代码:
function expandTextarea(id) {
document.getElementById(id).addEventListener('keyup', function() {
this.style.overflow = 'hidden';
this.style.height = 0;
this.style.height = this.scrollHeight + 'px';
}, false);
}
expandTextarea('txtarea');
body {
padding:50px;
}
textarea {
margin:0px 0px;
padding:5px;
height:16px;
line-height:16px;
width:96%;
display:block;
margin:0px auto;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<textarea id="txtarea" spellcheck="false" placeholder="Statusku..."></textarea>
答案 0 :(得分:5)
感谢您的所有答案,它让我对我必须改变的内容有了深刻的见解。最后,css中的填充底部更多了。
function expandTextarea(id) {
document.getElementById(id).addEventListener('keyup', function() {
this.style.overflow = 'hidden';
this.style.height = 0;
this.style.height = this.scrollHeight + 'px';
}, false);
}
expandTextarea('txtarea');
&#13;
body {
padding:50px;
}
textarea {
/* margin:0px 0px; this is redundant anyways since its specified below*/
padding-top:10px;
padding-bottom:25px; /* increased! */
/* height:16px; */
/* line-height:16px; */
width:100%; /* changed from 96 to 100% */
display:block;
/* margin:0px auto; not needed since i have width 100% now */
}
&#13;
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<textarea id="txtarea" spellcheck="false" placeholder="Statusku..."></textarea>
&#13;
答案 1 :(得分:2)
如果希望输入框自动适应文本高度。您可以尝试不使用input / textarea而是使用div这样:
<div contenteditable="true" aria-multiline="true"></div>
答案 2 :(得分:1)
将height
替换为min-height
textarea {
margin:0px 0px;
padding:5px;
min-height:16px;
line-height:16px;
width:96%;
display:block;
margin:0px auto;
}
答案 3 :(得分:1)
我也遇到同样的问题,使用自动调整大小引导文本区域,直到在这里找到解决方法textarea-autosize lib by javierjulio,它对我有用,您可以尝试一下。
textarea.textarea-autosize {
height: 2.25rem;
min-height: 2.25rem;
resize: none;
overflow-y:hidden;
}
textarea.textarea-autosize.form-control-lg {
height: 3.75rem;
min-height: 3.75rem;
}
textarea.textarea-autosize.form-control-sm {
height: 2rem;
min-height: 2rem;
}
有关该库的示例,您可以访问此页面jsfiddle。谢谢
答案 4 :(得分:1)
getbootstrap.com说:
<div class="overflow-auto">...</div>
<div class="overflow-hidden">...</div>
隐藏似乎可以很好地完成工作,即消除溢出。 与往常一样,您必须在
答案 5 :(得分:0)
这是最简单的,只需添加一个属性,例如rows =“ 10”,您就可以随心所欲地显示出来。
答案 6 :(得分:-1)
您可以使用!important来覆盖bootstrap属性。
textarea {
margin:0px 0px;
padding:5px;
height:16px !important;
line-height:16px;
width:96%;
display:block;
margin:0px auto;
}
答案 7 :(得分:-1)
function expandTextarea(id) {
document.getElementById(id).addEventListener('keyup', function() {
this.style.overflow = 'hidden';
this.style.height = 0;
this.style.height = this.scrollHeight + 'px';
}, false);
}
expandTextarea('txtarea');
body {
padding:50px;
}
textarea {
margin:0px 0px;
padding:5px;
height:16px;
line-height:16px;
width:96%;
display:block;
margin:0px auto;
}
<textarea id="txtarea" spellcheck="false" placeholder="Statusku..."></textarea>