textarea的value与innerHTML

问题的来由

今天有一位朋友问到关于 textarea标签的问题，开始时我不以为意。因为在我看来，因为这是一个很简单的标签，它表示一个可增删字符的文本域，可以利用 textarea 的 placeholder 和 value 属性来做一些适当的操作;用 cols rows 控制 列数，行数（当然，更好是用CSS的width和height）……嗯，就这些了。不过，你可以先看看下面的代码：

<textarea cols="20" rows="5"><i>斜体</i></textarea>

这是什么？
textarea 里的 i 真是一个“斜体”吗？结果你应该能猜到，它不可能是一级标题。
在 textarea中的所有字符，都会被当作是“字符串值”，也就是说 “<i>”只是 '<'+'i'+'>' 的一个字符串， textarea内不可能存在其他标签。到这里，你甚至可能就会有个疑问了，为什么 textarea是一个双标签？在标签内写入字符串有什么用？
我们可以试验以下代码：

<textarea cols="20" rows="5"><i>斜体</i></textarea>

<script>
    document.getElementById('mt').innerHTML; // "&lt;i&gt;斜体&lt;/i&gt;"
    document.getElementById('mt').value; // "<i>斜体</i>"
</script>

有趣的是，在读取 innerHTML 的时候，尖括号字符都被变为转义字符，而且我们尝试去读其 value 值时，竟然可以完整读取里面的内容，这说明了 innerHTML 可以作为其 value 值？
是这样的吗？继续看下去：

<script>
    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值并不会改变
</script>

结论

如果你有耐心把上面的连锁操作看完，相信你对我要解释的东西已然明白。
简单地说来，在 textarea内的 innerHTML 是字符串；在我们没有对textarea的 value 属性进行操作之前，如果你对 textarea 赋予了 innerHTML （字符串值），那么 textarea就拥有了一个起始状态的默认期望 value 值，并且可以通过 value 属性（或者 innerHTML 操作）来获取。不过，当你对 value 属性进行更改后（包括在文本域内的更改），innerHTML 作为一个初始期望值，就不会再起作用了。