</
script
>
</
html
>
1. keydown事件
keydown事件监听几乎所有按键操作,在键盘按下瞬间触发,若在keydown事件处理函数中
立即
获取文本框中的内容,通常会有一个字符的偏差。
$('#text').on('keydown', function() {
console.log($('#text').val());
若延迟获取内容,则可以获取到完整的内容
$('#text').on('keydown', function() {
setTimeout(function() {
console.log($('#text').val());
}, 1000);
2.keyup事件
keyup事件监听按键范围同keydown事件,在按键抬起瞬间触发,若在keyup事件处理函数中获取文本框中的内容,无法处理同一个按键按下不抬起的情况。。。
3.keypress事件
keypress事件不监听Shift、Ctrl、Alt、Windows及其它控制按键,不监听Tab,监听Enter。可通过事件对象判断是否按下Enter
$('#text').on('keypress', function(e) {
console.log($('#text').val());
if (e.which == 13) {
console.log('Enter is pressed');
4.change事件
change事件监听Tab、Enter按键,同时焦点转移至其它界面组件时也会触发此事件。用于文本框内容的验证较为方便
$('#text').on('change', function () {
if($('#text').val().trim() === '') {
console.log('text is empty');
html代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>测试文本框内容变化</title></head><body><label for="text">文本框</label><input type="text" id="text"></body><script src="js