我应该为 <textarea> 使用 .innerHTML 还是 .value？答案

【问题标题】：Should I use .innerHTML or .value for <textarea>?我应该为 <textarea> 使用 .innerHTML 还是 .value？
【发布时间】：2013-11-14 19:12:19
【问题描述】：

这是Does this not work because I can't use a script in a div?的后续

在我离开的地方，我有这个代码：
按钮脚本：

<script>
    var correctProperty = "value";
    function run(){
        document.getElementsByTagName("head")["0"].innerHTML += eval(document.getElementById("editorHead")[correctProperty]);
        document.getElementById("result").innerHTML = eval(document.getElementById("editorBody")[correctProperty]);
    }
</script>

文本区域（不带class 和style 属性并在非div 文本之间）：

<textarea id="editorHead" rows="20"></textarea>
<textarea id="editorBody" rows="20"></textarea>
<div id="result"></div>

目前这不起作用，我之前的一个答案（已接受的答案）说correctProperty 应该设置为"innerHTML"。那么应该吗？或者问题是干扰window（像以前一样）？或者，...我应该把它放在一个表格中，然后使用"value"？

【问题讨论】：

这里主要不使用eval()。
@Pointy 我知道这不是的问题。这是给定的。
另一个问题的答案是错误的。
@Pointy 检查您的通知
你想在这里做什么？ Here is the MDN documentation for the textarea element 可以看到“value”属性就是你想要的。

标签： javascript html forms

【解决方案1】：

Javascript innerHTML 确实会更新 textarea 中的文本，但不会在浏览器窗口中显示您所做的更改；如果您第二次使用它。例如，如果您有一些按钮可以更新 textarea 中的文本；此按钮将第一次插入文本，但第二次插入文本，虽然它会在 textarea 中插入文本（可以通过 firebug 或 chrome 开发人员工具证明），但这不会显示在浏览器窗口中。相反，如果您使用 value，它将显示在浏览器中（我在 chrome 和 firefox 中对其进行了测试）。

所以我认为你应该使用 .value

【讨论】：

我正在寻找这个问题的解释 (+1)。

【解决方案2】：

您可以通过“value”属性访问和更新 textarea 元素的值。

试试：

 var theValue = document.getElementById("editorHead").value;

更新<html> 元素没有多大意义。

【讨论】：

@raumaankidwai 您的代码由于其他原因无法正常工作，包括奇怪地使用了eval()。
“奇怪地使用eval()”是_only_的方式，句号。
证明它。我挑战你。
我做了 NOT 更新了html 元素，我更新了head 标签。如果我不这样做，用户将无法添加 CSS。
@raumaankidwai 好吧，你就是这里有问题的人:) 我的答案的更新显示了你如何获得<textarea> DOM 元素的“值”属性。 Here is a jsfiddle.

【解决方案3】：

不知道您为什么要使用 eval... 下面已更正.. 除此之外不确定您要完成什么。 value 和 innerHTML 都将从 textareas 中提取，问题是您只需要返回文本或可能的 HTML 值。

function run(){
    document.getElementsByTagName("html")[0].innerHTML += document.getElementById("editorHead").innerHTML;
    document.getElementById("result").innerHTML = document.getElementById("editorBody").innerHTML;
}

【讨论】：

除了.innerHTML 不是您获取<textarea> 元素值的方式。
我向你保证，.innerHTML 会从元素中提取 html，.value 也会如此。使用其中任何一个都不是示例中 OP 问题的根源。
但是，当用户在输入字段中输入内容时，它不会提取任何更新的内容。不信就试试看。