JavaScript中textarea元素的值获取方法？

作者站长头像
站长
· 阅读数 26

<body> <textarea id="text" name="" id="" cols="30" rows="10"></textarea> <button id="btn">提交</button> <script>

var text = document.getElementById("text"),
    btn=  document.getElementById("btn");
btn.onclick = function () {
  // var info = text.value;//方法一
  var info = text.innerHTML;//方法二
  console.log(info);
}
</script>

</body>使用方法2不生效，是空值（纯空白，不是null），现版本innerHTML不能用吗

有没有大佬知道，新手刚上路

回复
1个回答
avatar
test
2024-06-19

文档约定表单控件类的取值是.value具有内部 HTML 内容的 DOM 元素，例如 <div>、<span>、<td>、<th> 等，都适用于 innerHTML 属性。

textarea你可以理解为是webkit实现的 Web Components组件，你对他使用.innerHTML进行获取不生效，是因为他内部使用的是 Shadow DOM,即使你进行了赋值，审查元素也可以看到加上去了，但是页面是不会显示的，因为内部有自己的DOM实现逻辑。至于.value 还是.xxx 你在Web Components内部都可以自己定义。answer image

当你看完这个教程和这个源码，或许你就可以理解了

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容