在 HTML5 中,文本框(<input type="text">
)可以通过 JavaScript 来处理各种事件。以下是一些常见的文本框事件
及其应用方法:
1. onfocus: 当文本框获取焦点时触发。
html
<input type="text" onfocus="myFunction()">
JavaScript 代码:
javascript
function myFunction() {
alert("文本框获得焦点了");
}
2. onblur: 当文本框失去焦点时触发。
html
<input type="text" onblur="myFunction()">
JavaScript 代码:
javascript
function myFunction() {
alert("文本框失去焦点了");
}
3. onkeyup: 当用户松开键盘上的按键时触发。
html
<input type="text" onkeyup="myFunction(event)">
JavaScript 代码:
javascript
function myFunction(event) {
console.log(event.key);
}
这个示例中,event.key
可以获取用户松开的按键的值。
4. onkeydown: 当用户按下键盘上的按键时触发。
html
<input type="text" onkeydown="myFunction(event)">
JavaScript 代码:
javascript
function myFunction(event) {
console.log(event.key);
}
这个示例中,event.key
可以获取用户按下的按键的值。
5. oninput: 当文本框的值发生改变时触发。
html
<input type="text" oninput="myFunction()">
JavaScript 代码:
javascript
function myFunction() {
alert("文本框的值发生了改变");
}
这只是一些常见的文本框事件,HTML5 还提供了其他许多事件,可以根据需要选择适合的事件来处理文本框的交互。