W3School上虽然有比较详细的教程,不过对于一些基础的html标签的各个属性还是讲得不是那么详细。翻了一下以前买的超厚的那本html入门,发现对于textarea还是没有特别深入的讲解,几乎都是一笔带过。于是这里小记一下“textarea”这个标签的常用属性,免得日后忘记了 0.0 (很常用的col这种就不写了)
1、让textarea不可拖动大小(即不可缩放)
其实只要在头部添加一个css即可:
<style type="text/css"> textarea{ resize:none;} </style>
2、让textarea内的文本不可编辑(disabled)
<textarea disabled="disabled">这里的内容无法编辑</textarea>
3、设置textarea内默认文本,点击文本框后默认文本消失
<textarea onfocus="if(this.value=='默认文本') {this.value='';}" onblur="if(this.value=='') {this.value='默认文本';}">默认文本</textarea>
当然,你也可以用html5新增的属性(placeholder)
placeholder="默认文本"
4、设置最大字符长度(maxlength)
<textarea maxlength="20">这里只能输入20个字符</textarea>
5、关闭自动完成(autocomplete)
这个“autocomplete”指的是当用户曾经提交过该字符,保存在用户浏览器cookie里面的使用痕迹。它和AJAX里的全文检索autocomplete是另外一回事。如果需要用户自己再次输入而非自动完成,可以作如下设置:
<textarea autocomplete="off"></textarea>
顺便一说,form和input也有这个属性.
6、自动换行(wrap)
这个自动换行是指当用户输入字符长度超过规定的宽度时,自动切换到下一行,而不会出现横线滚动条也不用按回车键
<textarea wrap="off | hard | virtual | physical""></textarea>
说明:
wrap=”off”:不自动换行,默认属性
wrap=”hard”:自动硬回车换行,换行标记不会被一起发送
以下这两个参数都会让输入的文字超过栏宽时候自动换行
wrap=”virtual”:只有在按回车的地方有换行,其他部分不做变化
wrap=”physical”:依照输入的格式发送数据
7、打开页面时自动获得焦点(autofocus)
<textarea autofocus="autofocus"></textarea>
说明:这个是html5的新增属性
8、控制滚动条的可见性
去掉textarea横向或纵向滚动条办法,其实也是css来控制:
<textarea style="overflow-x:hidden丨overflow-y:hidden"></textarea>
说明:
overflow-x:hidden 去掉横向滚动条
overflow-y:hidden 去掉纵向滚动条
9、textarea的可见性
<textarea hidden="hidden"></textarea>
这真是极好的