JavaScript 获取文本框值

HTML 代码：

Full Name:

Submit

获取 JavaScript 文本框价值的不同方法

下面给出了各种 JavaScript 代码片段来获取 JavaScript 文本框的值。

function nameFunction() {

var element = document.getElementById('fullName').value;

document.getElementById('displayName').innerHTML = element;

}

输出：

我们学习的第一个获取文本框值的方法是 document.getElementById()。它选择具有特定值的 id 属性的第一个元素（此处为 fullName），通过使用 .value 属性获取其值，并将其保存到 element 变量中。document.getElementById() 再次用于修改具有 id 值 displayName 的元素的内容。要更新内容，使用 .innerHTML 属性。

function nameFunction() {

// first element in DOM (index 0) with name="fullName"

var element = document.getElementsByName('fullName')[0].value

document.getElementById('displayName').innerHTML = element;

}

输出：

上面的 JavaScript 代码使用 document.getElementByName 来获取具有给定名称的所有元素的列表（此实例为 fullName）。索引 0 处的元素值是从所有元素的列表中选择的。如果你的元素没有 id 属性，也可以使用它。

function nameFunction() {

document.getElementById('displayName').innerHTML =

document.forms[0].elements[0].value;

}

输出：

上面的代码修改了 id 值为 displayName 的元素的内容，并分配从索引 0 接收的值。请记住，你的 HTML 文件中必须有一个 元素才能通过索引获取值。

function nameFunction() {

document.getElementById('displayName').innerHTML = $('input:text').val();

}

输出：

上面给出的代码片段展示了 jQuery 方法 val()，它用于访问 JavaScript 文本框的值。此方法获取类型为 text 的第一个 input 元素的值。不要忘记在 标记中包含 jQuery。

Enjoying our tutorials? Subscribe to DelftStack on YouTube to support us in creating more high-quality video guides. Subscribe