HTML中的标签textarea产生的问题问题
2018-03-24 本文已影响0人
新为向前
概述：使用公司线上产品发现有许多小体验不好的地方
问题：
- 网页端其中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存在，会给用户带来不好的体验感受。
- 兼容的处理也是会导致不同浏览器处理效果不同
