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