从文本框 JavaScript 获取字符串

在前端开发中，我们经常需要从用户输入的表单中获取数据，最基本的就是从文本框中获取字符串。这篇文章将介绍如何使用 JavaScript 从文本框中获取字符串。

获取文本框元素

如果我们要获取文本框中输入的字符串，首先需要获取文本框的元素。我们可以使用 document.getElementById() 方法获取指定 id 的元素，例如：

var textBox = document.getElementById("myTextBox");

上面的代码将获取 id 为 myTextBox 的文本框元素，并将其赋值给变量 textBox。

获取文本框的值

获取了文本框的元素之后，接下来就可以从文本框中获取字符串了。文本框的值可以通过 value 属性获取，例如：

var textValue = textBox.value;

上面的代码将获取 textBox 文本框中的值，并将其赋值给变量 textValue。

监听文本框输入事件

如果我们希望实时获取用户输入的值，可以监听文本框的输入事件。文本框的输入事件可以使用 oninput 属性来指定回调函数，例如：

textBox.oninput = function() {
    var textValue = textBox.value;
    console.log(textValue);
};

上面的代码将在用户每次输入时，将文本框中的值输出到控制台中。

完整代码

下面是获取文本框中的值，以及监听文本框输入事件的完整代码：

var textBox = document.getElementById("myTextBox");

var textValue = textBox.value;
console.log(textValue);

textBox.oninput = function() {
    var textValue = textBox.value;
    console.log(textValue);
};

参考文献

• JavaScript Tutorial: DOM Events
• JavaScript Tutorial: HTML DOM Elements