jqueryテキストボックスtextarea適応高さ
3090 ワード
ブラウザのデフォルトのテキストボックスは内容の増加によって高くなることができなくて、固定の高さだけがスクロールバーがあって、体験はあまりよくなくて、多くの方法を探して互換性がなくて、やっと互換性の良い方法を見つけました:
<body>
<textarea id="textarea3" style="overflow-y:hidden; height:20px;resize: none">
</textarea>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function() {
//
$("#textarea1").textareaAutoHeight();
// 100px
$("#textarea2").textareaAutoHeight({maxHeight: 100});
// 50px， 200px
$("#textarea3").textareaAutoHeight({minHeight: 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("minHeight"));
var _maxHeight = parseFloat($(this).attr("maxHeight"));
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("overflow-y", "scroll");
}
else {
$(this).css("overflow-y", "hidden");
}
}
this.init();
}
});
</script>
</body>