标签：style blog color java 使用 io for ar
作者一直以为textarea只可以作为多行文本的输入框，今天才知道原来textarea可以显示提示的文本内容。
在显示内容的时候，可以实现
（1）隐藏边框
（2）隐藏右下角的拉伸边框
（3）自适应高度
下面是代码，需要css、js配合
<style type="text/css">
textarea
{
width: 580px;
resize:none;
border:0px solid;
line-height: 1.5em;
color:#333;
font-size: 14px;
margin-top: 10px;
padding: 0px;
overflow-y:hidden;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(‘.statuses‘).each(function()
{
this.style.height = ‘auto‘;
this.style.height = this.scrollHeight+‘px‘;
});
});
</script>
<textarea class="statuses" readonly >内容</textarea>
<textarea>输入框，也希望能自适应高度，就需要js配合，作者收集了一种方法
<script>
$.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>
<textarea id="textarea1"></textarea>
<textarea id="textarea2"></textarea>
<textarea id="textarea3"></textarea>
<script>
//最小高度和最大高度默认
$("#textarea1").textareaAutoHeight();
//最大高度为100px
$("#textarea2").textareaAutoHeight({ maxHeight:100 });
//最小高度为50px，最大高度为200px
$("#textarea3").textareaAutoHeight({ minHeight:50, maxHeight:200 });
</script>
如果对jquery代码中的$.fn.extend含义不理解，网上的一片文章简要介绍了jquery扩展，作者在这里引用一下：
jQuery为开发插件提拱了两个方法，分别是：
jQuery.fn.extend();
jQuery.extend();
虽然 javascript 没有明确的类的概念，但是用类来理解它，会更方便。
jQuery便是一个封装得非常好的类，比如我们用 语句 $("#btn1") 会生成一个 jQuery类的实例。
jQuery.extend(object); 为jQuery类添加类方法，可以理解为添加静态方法。如：
jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
jQuery.min(2,3); // 2ObjectjQuery.extend( target, object1, [objectN])用一个或多个其他对象来扩展一个对象，返回被扩展的对象
jQuery.max(4,5); // 5var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
jQuery.extend(settings, options);
结果：settings == { validate: true, limit: 5, name: "bar" }
jQuery.fn.extend(object); 对jQuery.prototype进得扩展，就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。
比如我们要开发一个插件，做一个特殊的编辑框，当它被点击时，便alert 当前编辑框里的内容。可以这么做：
$.fn.extend({
alertWhileClick:function() {
$(this).click(function(){
alert($(this).val());
});
}
});
$("#input1").alertWhileClick(); // 页面上为：
$("#input1") 为一个jQuery实例，当它调用成员方法 alertWhileClick后，便实现了扩展，每次被点击时它会先弹出目前编辑里的内容。
标签：style blog color java 使用 io for ar
原文地址：http://www.cnblogs.com/birdskyws/p/3920530.html
