如何将 HTML 中的文本区域输出到 Javascript 中的变量？

Question

在 HTML 网站中，我有一个这样创建的文本区域：

<textarea id = "myTextArea" rows = "30" cols = "80"></textarea>

我希望在文本区域中写入内容后，将该文本发送到 javascript 中的变量。

我试过这样做，但没有成功：

var x = document.getElementById("myTextArea").value;

console.log(x); 不返回任何内容，不是 null，只是空 space。但是，如果我注销 console.log(document.getElementById("myTextArea").value) 然后我会得到我在我的 textarea 中写的文本。

为什么 var x = document.getElementById("myTextArea").value; 不起作用？

我的Javascript:

<script>
var x = document.getElementById("myTextArea").value;
const regex = /([a-z]+)/;
const match = regex.exec(x);

var intervalID = window.setInterval(myCallback, 500); <!-- Calls every 5s -->

function myCallback() {
    if(match){
       const name = match[1];
       console.log(name);
    }
    else{
       console.log('no match');
       console.log(match);
    }
}

Answer 1

为此您需要使用 onkeyup 和 onchange。 onchange 将阻止上下文菜单粘贴，onkeyup 将在每次击键时触发。

请参阅我在 How to impose maxlength on textArea 上的回答以获取代码示例。

Answer 2

在我的示例中，变量是 text 变量。这个变量通过点击button.

填充文本的文本

有必要吗？

var x = document.getElementById("myTextArea");
var button = document.querySelector("button");
var text = "";

button.onclick = function() {
  text = x.value;
  console.log(text);
}

#myTextArea {
  width: 100%;
  height: 100px;
}

<textarea id="myTextArea" rows="30" cols="80"></textarea>
<button>Check variable with text</button>

第二个示例使用 oninput 事件。

var x = document.getElementById("myTextArea");
var text = "";

x.oninput = function() {
  text = this.value;
  console.log(text);
}

#myTextArea {
  width: 100%;
  height: 100px;
}

<textarea id="myTextArea" rows="30" cols="80"></textarea>

Answer 3

为此，您可以在 textarea 上注册一个事件侦听器：

var textArea = document.getElementById('myTextArea');

textArea.addEventListener('input', function(event){
    console.log(event.target.value);
});

侦听器侦听您的 textara 上的任何 input 事件，并在值更改时记录您的 textarea 的值。

这里有一个 live demo 供您快速参考。

如何将 HTML 中的文本区域输出到 Javascript 中的变量？

How to output a textarea in HTML to a variable in Javascript?

html

javascript

textarea