JavaScript中的Input事件是用于檢測文本輸入框中是否有內容被輸入的事件。
當用戶在文本框中輸入、粘貼或刪除文本時,Input事件便會觸發。在input事件中,你可以訪問文本框中的值,并根據用戶的實時輸入做出相應的反應。
以下是一個簡單的使用Input事件的例子:
const input = document.querySelector('input');
input.addEventListener('input', (event) =>{
console.log(event.target.value);
});
在此示例中,我們監聽了一個Input事件,并使用console.log()在控制臺上輸出輸入框的值。每當用戶在輸入框中輸入或刪除字符時,Input事件便會觸發,并將輸入框的值輸出到控制臺上。
輸入事件不僅可以用于文本框,還可以用于其他類型的表單控件,如下拉列表和單選框等。
以下是一個使用Input事件檢測下拉列表的例子:
const select = document.querySelector('select');
select.addEventListener('input', (event) =>{
console.log(event.target.value);
});
和文本框Input事件一樣,這個例子中的事件會在用戶選擇不同的下拉列表選項時觸發。通過這種方式,我們可以對用戶的選擇做出反應。
除了監聽文本輸入事件,Input事件還可以用于檢測文件輸入框中的文件變化。以下是一個使用Input事件檢測文件變化的例子:
const fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('input', (event) =>{
console.log(event.target.files[0].name);
});
在這個例子中,我們檢測了文件輸入框中文件變化的文件名,并在控制臺中輸出。
總之,Input事件可以在用戶輸入、選擇或刪除文本、文件或其他表單控件時觸發。通過監聽這個事件,我們可以實時地獲取用戶的輸入和選擇,并根據需要做出相應的反應。