jQuery 事件 - keypress() 方法 概述
jQuery 2022-06-01 12:09:21小码哥的IT人生shichen
jQuery 事件 - keypress() 方法
实例
计算在输入域中的按键次数：
$("input").keydown(function(){
$("span").text(i+=1);
});
完整实例：
<html>
<head>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
i=0;
$(document).ready(function(){
$("input").keypress(function(){
$("span").text(i+=1);
});
});
</script>
</head>
<body>
Enter your name: <input type="text" />
<p>Keypresses:<span>0</span></p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
定义和用法
keypress 事件与 keydown 事件类似。当按钮被按下时，会发生该事件。它发生在当前获得焦点的元素上。
不过，与 keydown 事件不同，每插入一个字符，就会发生 keypress 事件。
keypress() 方法触发 keypress 事件，或规定当发生 keypress 事件时运行的函数。
注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。
触发 keypress 事件
语法
$(selector).keypress()
完整实例：
<html>
<head>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
i=0;
$(document).ready(function(){
$("input").keypress(function(){
$("span").text(i+=1);
});
$("button").click(function(){
$("input").keypress();
});
});
</script>
</head>
<body>
Enter your name: <input type="text" />
<p>Keypresses:<span>0</span></p>
<button>触发输入域的 keypress 事件</button>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
将函数绑定到 keypress 事件
语法
$(selector).keypress(function)
| 参数 | 描述 |
|---|---|
| function | 可选。规定当发生 keypress 事件时运行的函数。 |
完整实例：
<html>
<head>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
i=0;
$(document).ready(function(){
$("input").keypress(function(){
$("span").text(i+=1);
});
});
</script>
</head>
<body>
Enter your name: <input type="text" />
<p>Keypresses:<span>0</span></p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
