我应该在<textarea>中使用.innerHTML还是.value？

Question

我应该在<textarea>中使用.innerHTML还是.value？

5

我之前的代码如下：
按钮脚本：

<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"？

- raumaan kidwai

2

这里主要不要使用的是 eval()。 - Pointy

@Pointy 我知道这不是问题。这是已知的。 - raumaan kidwai

1

那个回答其他问题的答案是错误的。 - Pointy

@Pointy 请查看您的通知。 - raumaan kidwai

1

你在这里想要做什么？这是文本区域元素的MDN文档，你可以看到“value”属性是你想要的。 - Pointy

3个回答

3

您可以通过“value”属性访问和更新文本区域元素的值。请尝试以下操作：

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

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

- Pointy

1

@raumaankidwai，你的代码出了其他问题，包括奇怪地使用了 eval()。 - Pointy

我没有更新html元素，我更新了head标签。如果我不这样做，用户将无法添加CSS。 - raumaan kidwai

@raumaankidwai 好吧，你是这里遇到问题的人 :) 我更新了我的答案，展示了如何获取<textarea> DOM元素的"value"属性。这里有一个jsfiddle链接。 - Pointy

document.getElementsByTagName("html")["0"]会给你文档元素，而不是<head>。 - Pointy

那不是我想表达的意思。哎呀，我现在会修复它。 - raumaan kidwai

显示剩余2条评论

-1

不知道你为什么使用 eval... 下面是修正的代码... 除此之外，我不确定你想要实现什么。无论是 value 还是 innerHTML 都会从文本区域提取内容，问题是你只想要返回纯文本还是可能包含 HTML 标签的值。

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

- Grimnoff

除了 .innerHTML 之外，获取 <textarea> 元素的值的方式是不正确的。 - Pointy

我向您保证，无论是使用.innerHTML还是.value，都可以从<textarea>元素中提取HTML。在示例中，使用这两种方法都不是OP问题的根源。 - Grimnoff

1

当用户在输入框中输入时，它不会拉取任何更新的内容。如果你不相信，可以试一下。 - Pointy

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Adeel Raza Azeemi · Accepted Answer

JavaScript的innerHTML可以更新文本区域中的文本，但是如果您在第二次使用它时，浏览器窗口不会显示您的更改。例如，如果您有一个按钮来更新文本区域中的文本，这个按钮将首次插入文本，但是在第二次插入文本时，虽然它会在文本区域中插入文本（可以通过Firebug或Chrome开发者工具证明），但是这不会在浏览器窗口中显示。相反，如果您使用value属性，则在浏览器中显示。我已经在Chrome和Firefox中测试过了。因此，我认为你应该使用.value。