内容发布更新时间 : 2025/1/7 14:51:30星期一 下面是文章的全部内容请认真阅读。
浏览器中默认的文本框是不能根据内容的增多变高，只能固定高度有滚动条，体验不是很好，找了很多方法兼容都不行，总算找到个兼容良好的方法： <body>
<textarea id=\style=\height:20px;resize: none\
</textarea> <script type=\src=\
<script type=\ $(function() {
//最小高度和最大高度默认
$(\ //最大高度为100px
$(\ //最小高度为50px，最大高度为200px
$(\50, maxHeight: 200});
})
$.fn.extend({
textareaAutoHeight: function(options) { this._options = {
minHeight: 0, maxHeight: 1000 }
this.init = function() {
for (var p in options) {
this._options[p] = options[p]; }
if (this._options.minHeight == 0) {
this._options.minHeight = parseFloat($(this).height());
}
for (var p in this._options) {
if ($(this).attr(p) == null) {
$(this).attr(p, this._options[p]);
} } $(this).keyup(this.resetHeight).change(this.resetHeight)
.focus(this.resetHeight); }
this.resetHeight = function() {
var _minHeight = parseFloat($(this).attr(\
var _maxHeight = parseFloat($(this).attr(\
if (!$.browser.msie) { $(this).height(0); }
var h = parseFloat(this.scrollHeight);
h = h < _minHeight ? _minHeight :h > _maxHeight ? _maxHeight : h;
$(this).height(h).scrollTop(h); if (h >= _maxHeight) {
$(this).css(\ } else {
$(this).css(\ } }
this.init(); } }); </script> </body>
以上就是本文的全部内容，希望对大家学习jquery程序设计有所帮助。