获取textarea的真实值

Question

最近我遇到了 textarea 的问题。如果我有这样的文本区域，

<textarea>Hello World</textarea>

然后我用JS获取里面的内容，

var textareaText = document.getElementsByTagName('textarea')[0].value

变量textareaText为Hello World。但是如果我要改变textarea的值，重新运行这个JS。尽管真正的当前值是别的东西，它仍然会导致 Hello World。我查了一下，看到了 +5 个答案，但他们都使用 jQuery 这是我不使用或不知道（翻译）和 none 纯 JS。如果有人可以帮助我，将不胜感激。还有一些答案似乎只针对一个文本区域。在我的项目中，我有 +1,000，所以我想避免这种情况。

Answer 1

可能是？

<textarea id="text-area">Hello World</textarea>

    var el = document.getElementById("text-area");
    var textareaText;
    el.addEventListener("input", function(e) {
    textareaText = e.target.value;
        console.log(e.target.value);
    });

Answer 2

在我的电脑上运行良好：

function getText(){
  var textareaText = document.getElementsByTagName('textarea')[0].value;
  console.log(textareaText);
};

  <textarea>Hello World</textarea><br>
  <button type="button" onclick="getText();">Get text</button>

Answer 3

这应该有效，无论您使用多少 <textarea>，这都应该有效：

<textarea id="textarea1">hello</textarea>
<textarea id="textarea2">goodbye</textarea>
<button id="button">button</button>
<script type="text/javascript">
    var button = document.getElementById("button");
    button.onclick = function() {
        alert(document.getElementById("textarea1").value + "\n" + document.getElementById("textarea2").value);
    };
</script>

我刚刚对其进行了测试，无论我更改哪个值，即使我同时更改两个值，它都能正常工作。诀窍是不存储值，因为它们不会更新，因此您应该在现场获取值。

虽然这违反了问题指南，但对于“1000+”文本区域，为每个文本区域设置一个 JavaScript 变量可能会减慢加载时间。我可以建议 jQuery，同 HTML?

<script type="text/javascript">
    $("#button").on("click", function () {
        alert($("#textarea1").val() + "\n" + $("#textarea2").val());
    });
</script>

当然，您可以随意混合和更改上面提供的代码。希望这对您有所帮助！

获取textarea的真实值

Get true value of textarea

html

javascript

textarea