textarea 中的 innerHTML 和 value

时间:2022-09-23 18:45:39
<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!