HTML中的标签textarea产生的问题

**概述：**使用公司线上产品发现有许多小体验不好的地方 问题：

网页端其中 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 里边依次设置的是文本框的背景色，上下左右边框色和厚度，以及输入字体的大小等。

1
2
3
4
5
6
7
.textbox {
  background: #bfcedc;
  border: #7f9db9 1px solid;
  font-family: "宋体", "Verdana", "Arial", "Helvetica";
  font-size: 12px;
  text-align: left;
}

小结

开发中 textarea 会有一些小细节，不注意会导致一些 bug 存在，会给用户带来不好的体验感受。兼容的处理也是会导致不同浏览器处理效果不同