textarea 中的 innerHTML 和 value
2016-12-28 19:31
393 查看
<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 置空了。
相关文章推荐
- 关于textarea的innerHTML和value
- 用innerHTML给textarea的value赋值,IE下丢失换行
- 如何获取textarea中的内容?innerhtml、innerText还是value?
- html textarea标签的innerHTML属性和value属性的区别
- html textarea标签的innerHTML属性和value属性的区别
- FF下innerHTML获取不到input标签中value的值解决办法
- js中innerHTML和value的区别
- JS中innerHTML、outerHTML、innerText 、outerText、value的区别与联系?
- JavaScript innerText与innerHtml与value的区别
- php中怎么从数据库中调值回<textarea>写value不行啊
- 被玩坏的innerHTML、innerText、textContent和value属性
- HTML textarea value赋值
- getElementById().innerHTML与getElementById().value的区别
- JS中innerHTML与value用法的区别。
- nodeValue、value和innerHTML的区别
- JavaScript innerText与innerHtml与value的区别
- input输入框和textarea文本框的value改变事件
- Value,innerHtml,innerText的区别
- jquery中的innerHTML和value函数获取textarea内容
- 清空标签间的内容(innerHTML)和 value