问题的来由
今天有一位朋友问到关于 textarea标签的问题，开始时我不以为意。因为在我看来，因为这是一个很简单的标签，它表示一个可增删字符的文本域，可以利用 textarea 的 placeholder 和 value 属性来做一些适当的操作;用 cols rows 控制 列数，行数（当然，更好是用CSS的width和height）......嗯，就这些了。不过，你可以先看看下面的代码：
<textarea cols="20" rows="5"><i>斜体</i></textarea>
这是什么？
textarea 里的 i 真是一个“斜体”吗？结果你应该能猜到，它不可能是一级标题，其真正表现如下：
<textarea cols="20" rows="5"><i>斜体</i></textarea>
在 textarea中的所有字符，都会被当作是“字符串值”，也就是说 “<i>”只是 '<'+'i'+'>' 的一个字符串， textarea内不可能存在其他标签。到这里，你甚至可能就会有个疑问了，为什么 textarea是一个双标签？在标签内写入字符串有什么用？
我们可以试验以下代码：
<textarea cols="20" rows="5"><i>斜体</i></textarea>
document.getElementById('mt').innerHTML;// "＆lt;o\i＆gt;标题＆lt;/i＆gt;"
document.getElementById('mt').value;// "<i>斜体</i>"
有趣的是，在读取 innerHTML 的时候，尖括号字符都被变为转义字符，而且我们尝试去读其 value 值时，竟然可以完整读取里面的内容，这说明了 innerHTML 可以作为其 value 值？
是这样的吗？继续看下去：
<textarea cols="20" rows="5"><i>斜体</i></textarea>
var mt = document.getElementById('mt');
mt.innerHTML; //"＆lt;i＆gt;标题＆lt;/i＆gt;"
mt.innerHTML = 'heiheihei';
mt.value;// "heiheihei" //恩，value值确实改变了
mt.value = 'yoyoyo'; //改变其 value
mt.innerHTML;//"heiheihei" //改变 value 值，并不会使得innerHTML改变
mt.innerHTML = 'zezeze'; //再次改变 innerHTML ，看看 value 会不会变
mt.value; //"yoyoyo" value值并不会改变
结论
如果你有耐心把上面的连锁操作看完，相信你对我要解释的东西已然明白。
简单地说来，在 textarea内的 innerHTML 是字符串；在我们没有对textarea的 value 属性进行操作之前，如果你对 textarea 赋予了 innerHTML （字符串值），那么 textarea就拥有了一个起始状态的默认期望 value 值，并且可以通过 value 属性（或者 innerHTML 操作）来获取。不过，当你对 value 属性进行更改后（包括在文本域内的更改），innerHTML 作为一个初始期望值，就不会再起作用了。
网友评论