快捷導(dǎo)航

JavaScript獲取input輸入框內(nèi)容的常用方法

更新時間：2025年12月08日 09:53:54 作者：AI老李

在 JavaScript 中,獲取 <input> 輸入框內(nèi)容是常見的操作,可以通過原生 JavaScript 或結(jié)合 jQuery 等庫實(shí)現(xiàn),以下是詳細(xì)的中文講解,介紹幾種常用的獲取 <input> 內(nèi)容的方法,包含代碼示例、使用場景和注意事項(xiàng),需要的朋友可以參考下

1.原生 JavaScript 方法

方法 1：通過value屬性

描述：使用 DOM 對象的 value 屬性直接獲取輸入框的值。
適用場景：最簡單、直接的方法，適用于所有輸入類型（如 text、password、email 等）。
代碼示例：

// HTML: <input type="text" id="myInput">
const input = document.getElementById('myInput');
const value = input.value;
console.log(value); // 輸出輸入框內(nèi)容

說明：value 屬性返回字符串，空輸入框返回空字符串 ""。

方法 2：通過事件監(jiān)聽（如input或change）

描述：監(jiān)聽輸入框的 input 或 change 事件，實(shí)時或在失焦時獲取值。
適用場景：需要動態(tài)響應(yīng)用戶輸入，如實(shí)時驗(yàn)證或搜索建議。
代碼示例：

// HTML: <input type="text" id="myInput">
const input = document.getElementById('myInput');

// 實(shí)時監(jiān)聽（每次輸入觸發(fā)）
input.addEventListener('input', function() {
    console.log('實(shí)時輸入:', this.value);
});

// 失焦時觸發(fā)
input.addEventListener('change', function() {
    console.log('失焦后值:', this.value);
});

說明：
- input 事件：每次輸入內(nèi)容變化時觸發(fā)，適合實(shí)時反饋。
- change 事件：輸入框失焦（blur）時觸發(fā)，適合提交最終值。

方法 3：通過querySelector選擇器

描述：使用 document.querySelector 或 document.querySelectorAll 按 CSS 選擇器獲取輸入框。
適用場景：當(dāng)沒有明確 ID 或需要選擇多個輸入框時。
代碼示例：

// HTML: <input type="text" class="user-input" name="username">
const input = document.querySelector('.user-input');
console.log(input.value); // 輸出輸入框內(nèi)容

// 獲取所有 name="username" 的輸入框
const inputs = document.querySelectorAll('input[name="username"]');
inputs.forEach(input => console.log(input.value));

說明：靈活選擇特定輸入框，適合復(fù)雜 DOM 結(jié)構(gòu)。

方法 4：通過表單的FormData

描述：從 <form> 表單中獲取所有輸入框的值，適用于提交表單數(shù)據(jù)。
適用場景：處理包含多個輸入框的表單，如登錄或注冊頁面。
代碼示例：

// HTML: <form id="myForm"><input type="text" name="username"><input type="password" name="password"></form>
const form = document.getElementById('myForm');
form.addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止表單默認(rèn)提交
    const formData = new FormData(form);
    console.log(formData.get('username')); // 獲取 username 輸入框的值
    console.log(formData.get('password')); // 獲取 password 輸入框的值
});

說明：FormData 按 name 屬性獲取值，適合批量處理表單數(shù)據(jù)。

2.使用 jQuery 方法

方法 5：通過 jQuery 的val()方法

描述：使用 jQuery 的 val() 方法獲取或設(shè)置輸入框的值。
適用場景：項(xiàng)目已使用 jQuery，需簡潔操作 DOM。
代碼示例：

// HTML: <input type="text" id="myInput" class="user-input">
$(document).ready(function() {
    // 獲取值
    const value = $('#myInput').val();
    console.log(value);

    // 監(jiān)聽變化
    $('.user-input').on('input', function() {
        console.log('實(shí)時輸入:', $(this).val());
    });

    // 設(shè)置值
    $('#myInput').val('新值');
});

說明：
- val() 無參數(shù)時獲取值，有參數(shù)時設(shè)置值。
- 支持選擇器（如 #id、.class），靈活性高。
- 需要引入 jQuery 庫：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

3.綜合示例

以下是一個結(jié)合多種方法的完整示例，展示如何獲取和處理輸入框內(nèi)容：

<!DOCTYPE html>
<html>
<head>
    <title>獲取輸入框內(nèi)容</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <form id="myForm">
        <input type="text" id="username" name="username" placeholder="請輸入用戶名">
        <button type="submit">提交</button>
    </form>

    <script>
        // 方法 1: 原生 value
        const input = document.getElementById('username');
        console.log('初始值:', input.value);

        // 方法 2: 事件監(jiān)聽
        input.addEventListener('input', function() {
            console.log('實(shí)時輸入:', this.value);
        });

        // 方法 3: querySelector
        const inputByClass = document.querySelector('#username');
        console.log('通過選擇器:', inputByClass.value);

        // 方法 4: FormData
        const form = document.getElementById('myForm');
        form.addEventListener('submit', function(event) {
            event.preventDefault();
            const formData = new FormData(form);
            console.log('FormData 獲取:', formData.get('username'));
        });

        // 方法 5: jQuery
        $(document).ready(function() {
            $('#username').on('change', function() {
                console.log('jQuery 獲取:', $(this).val());
            });
        });
    </script>
</body>
</html>

4.方法對比

方法	依賴	優(yōu)點(diǎn)	缺點(diǎn)
`value` 屬性	無	簡單直接，性能高	需要手動獲取 DOM 元素
事件監(jiān)聽	無	支持動態(tài)響應(yīng)，實(shí)時獲取	需額外事件處理邏輯
`querySelector`	無	靈活選擇，支持復(fù)雜 DOM	選擇器語法需熟悉
`FormData`	無	適合表單批量處理，現(xiàn)代化 API	只適用于表單元素
jQuery `val()`	jQuery	簡潔，鏈?zhǔn)讲僮?，跨瀏覽器兼容	需引入 jQuery，增加資源加載

5.注意事項(xiàng)

空值處理：輸入框?yàn)榭諘r，value 或 val() 返回空字符串 ""，需檢查以避免邏輯錯誤。

if (input.value.trim() === '') {
    console.log('輸入為空！');
}

輸入類型：
- 不同類型（如 checkbox、radio）的獲取方式不同：
  - Checkbox：input.checked 或 $('#checkbox').prop('checked')。
  - File：input.files 或 $('#fileInput')[0].files。
性能：
- 原生方法性能優(yōu)于 jQuery，適合輕量項(xiàng)目。
- 頻繁操作 DOM（如實(shí)時監(jiān)聽）建議防抖（debounce）：

let timeout;
input.addEventListener('input', function() {
    clearTimeout(timeout);
    timeout = setTimeout(() => console.log(this.value), 300);
});

安全性：獲取用戶輸入后，需防止 XSS 攻擊，建議過濾或轉(zhuǎn)義：

const safeValue = input.value.replace(/[<>]/g, ''); // 簡單過濾

兼容性：原生方法（如 value、FormData）現(xiàn)代瀏覽器全支持；jQuery 需確保引入正確版本。

6.總結(jié)

首選方法：原生 value 屬性，簡單高效，適用于大多數(shù)場景。
動態(tài)場景：使用 input 或 change 事件監(jiān)聽，結(jié)合 FormData 處理表單。
jQuery 項(xiàng)目：val() 方法簡潔，適合已有 jQuery 環(huán)境。
選擇依據(jù)：
- 無依賴需求：用原生 JavaScript。
- 復(fù)雜表單：用 FormData。
- jQuery 項(xiàng)目：用 val() 和事件綁定。
  根據(jù)項(xiàng)目需求和是否引入 jQuery 選擇合適方法。