textarea 中的 innerHTML 和 value

<textarea></textarea>
<input type="button" value="click" />
<script>
  document.querySelector("input[type='button']").addEventListener("click", function() {
    document.querySelector("textarea").innerHTML = 'hello world';
  }, false);
</script>

这段代码是有问题的，点击按钮，然后删除 textarea 区域的文字，再点按钮，文字无法再次生成。这里我们不应该使用 innerHTML，而应该使用 value。

textarea 的 value 和 innerHTML 总结：（摘自 http://mygit.me/2016/07/13/textarea-value-and-innerhtml/）

• innerHTML 仅在 textarea 初始化的时候对 value 有影响，value 的内容就是从 innerHTML 来的；
• 除此之外，innerHTML 和 value 没有任何关系，修改 value 不影响 innerHTML，修改innerHTML 不影响 value；
• 界面上呈现的永远是 value 的值，而不是 innerHTML，比如通过代码修改 innerHTML 之后，界面上 textarea 里面的内容还是 value 的值；
• 获取文本框的内容，自始至终都应该读取 value；
• value 获取的是原始内容，innerHTML 获取的内容会自动将 < 和 > 这2个符号转义；
• 初始化 textarea 的内容只能写在 <textarea> 和 </textarea> 的中间，不能像 input 那样写在 value 属性上面；

所以 value 一般用于一些表单元素的获取值，input，select 等，textarea 也算表单元素，而 innerHTML 用于 div, span, td 等其他元素。

总结下就是，切记 表单元素别用 innerHTML！

---

2017.09.12 今天碰到一个很奇怪的 bug，初始化了一个 textarea 元素，有值（<textarea>xxx</textarea> 形式），然后插入 dom 中，但是表现出来的值却不见了，查看元素，xxx 安好在标签里，这种情况应该立马想到 xxx 只是 innerHTML，真正的表现是 value！结果也正是这样，某步操作把 value 置空了。