概述:使用公司线上产品发现有许多小体验不好的地方
问题:
- 网页端其中textarea写入过多的文字的时候不能更改前面文字内容(没有滚动条)
- 默认的样式其实很丑的,css做样式处理
HTML中的标签textarea的属性及用法
cols,垂直列。在没有做样式表设置的情况下,它表示一行中可容纳下的字节数。例如cols=60,表示一行中最多可容纳60个字节,也就是30个汉字。另外要注意的是,文本框的宽度就是通过这个来调整,输入好cols的数值,然后再定义输入文字字体的大小(不定义的话,会采用默认值),那么文本框的宽度就确定了。
rows,水平列。表示可显示的行数,例如rows=10,表示可显示10行。超过10行,则需要拖动滚动条来浏览了。(同上,文本框的高度就是通过这个来控制的。)
name,文本框的名称,这项必不可省,因为存储文本的时候必须用到。
warp,当warp="off"表示该文本区域中不自动换行,当然不写默认是自动换行的。这个参数一般用得比较少。
style,这是个非常实用的参数,可以用来设置文本框的背景色,滚动条颜色及形式,边框色,输入字体的大小颜色等等。
class,一般用来调用外部css里边的设置。
css里的overflow属性
overflow-x及overflow-y的可取值为:visible(默认取值),hidden,auto,scroll。
- visible:始终不显示滚动条,文本区域的大小会根据内容的增加,自动增长,以显示全部内容。
- scroll:不管文本区域里的内容有多少,始终显示滚动条。
- hidden:始终不显示滚动条,内容超出层面的对象是不显示。
- auto:如果内容在文本区域内可以全部显示,滚动条不显示,当内容无法全部显示时,内容被截断,加上滚动条显示所有内容。
注意:建议还是使用visible实际使用的时候,auto谷歌浏览器会有时候,文字超出会显示有时候不显示滚动条。
对于textarea样式的处理
最好的方法其实是通过CSS 类设定,不过要事先跟UI事先要设计好
- textarea设置文本框的滚动条颜色,边框色,以及字体大小,颜色,行距等,都可以直接在style里设置。不过这些最好放在CSS里设置,直接调用就好了。下面是一段CSS设置代码:应该比较容易看懂,css里边依次设置的是文本框的背景色,上下左右边框色和厚度,以及输入字体的大小等。
<style>
.textbox {
background: #BFCEDC;
border: #7F9DB9 1px solid;
font-family: "宋体", "Verdana", "Arial", "Helvetica";
font-size: 12px;
text-align: left;
}
</style>
小结
- 开发中textarea会有一些小细节,不注意会导致一些bug存在,会给用户带来不好的体验感受。
- 兼容的处理也是会导致不同浏览器处理效果不同