当前位置：首页 > news >正文

在 HTML 中，＜input＞元素支持的事件汇总

news 2025/7/16 1:08:32

在 HTML 中，<input> 元素支持多种事件，这些事件可以在用户与输入字段交互时触发。以下是一些常见的 <input> 事件：

input:
- 当 <input> 元素的值发生变化时触发。
- 适用于文本、数字、日期等类型的输入。
change:
- 当 <input> 元素的值发生变化并且失去焦点（blur）时触发。
- 适用于文本、复选框、单选按钮等。
focus:
- 当 <input> 元素获得焦点时触发。
- 例如，当用户点击或使用 Tab 键导航到输入字段时。
blur:
- 当 <input> 元素失去焦点时触发。
- 例如，当用户点击页面的其他地方或按 Tab 键离开输入字段时。
keydown:
- 当用户按下键盘上的任意键时触发。
- 可以用于捕获特定的按键操作。
keyup:
- 当用户释放键盘上的任意键时触发。
- 通常用于检测按键释放后的状态。
keypress:
- 当用户按下并释放一个字符键时触发。
- 注意：这个事件在现代浏览器中已经被 beforeinput 和 input 事件所取代。
click:
- 当用户点击 <input> 元素时触发。
- 对于按钮和复选框特别有用。
mousedown:
- 当用户按下鼠标按钮时触发。
- 适用于需要捕获鼠标按下动作的情况。
mouseup:
- 当用户释放鼠标按钮时触发。
- 适用于需要捕获鼠标释放动作的情况。
select:
- 当用户选择 <input> 元素中的文本时触发。
- 适用于文本输入字段。
paste:
- 当用户粘贴内容到 <input> 元素中时触发。
- 可以用于处理粘贴的内容。
cut:
- 当用户剪切 <input> 元素中的内容时触发。
- 可以用于处理剪切的内容。
copy:
- 当用户复制 <input> 元素中的内容时触发。
- 可以用于处理复制的内容。

示例代码

以下是一个示例，展示了如何在 <input> 元素上绑定和处理一些常见的事件：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Input Events Example</title>
</head>
<body><input type="text" id="myInput" placeholder="Enter some text"><script>const inputElement = document.getElementById('myInput');// input 事件inputElement.addEventListener('input', (event) => {console.log('Input value changed:', event.target.value);});// change 事件inputElement.addEventListener('change', (event) => {console.log('Input value changed and lost focus:', event.target.value);});// focus 事件inputElement.addEventListener('focus', (event) => {console.log('Input field gained focus');});// blur 事件inputElement.addEventListener('blur', (event) => {console.log('Input field lost focus');});// keydown 事件inputElement.addEventListener('keydown', (event) => {console.log('Key pressed:', event.key);});// keyup 事件inputElement.addEventListener('keyup', (event) => {console.log('Key released:', event.key);});// click 事件inputElement.addEventListener('click', (event) => {console.log('Input field clicked');});// select 事件inputElement.addEventListener('select', (event) => {console.log('Text selected in input field');});// paste 事件inputElement.addEventListener('paste', (event) => {console.log('Pasted content:', event.clipboardData.getData('text'));});// cut 事件inputElement.addEventListener('cut', (event) => {console.log('Cut content:', event.clipboardData.getData('text'));});// copy 事件inputElement.addEventListener('copy', (event) => {console.log('Copied content:', event.clipboardData.getData('text'));});</script>
</body>
</html>