小记一下HTML中textarea的一些用法

       text

       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>

 

这篇文章有1条评论

  1. inlaid harp 2014/5/2 #1 回复TA

    这真是极好的

发表评论戳我取消回复

*

List
Love
00:00