1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > JS 监听 键盘按键 事件 以Enter键为例子

JS 监听 键盘按键 事件 以Enter键为例子

时间:2023-05-10 18:46:29

相关推荐

JS 监听 键盘按键 事件 以Enter键为例子

实现的功能是用手按键盘Enter键 达到点击 js的button确定按钮同样的效果

其中js主要代码如下,写在<script></script>里面。

keyCode==13代表键盘里面的 ‘Enter’ 键,所以改变keyCode就可以表示按了键盘对应的某个键

<div class="login-button">登录</div><script type="text/javascript">document.onkeydown=function(event){var e = event || window.event || arguments.callee.caller.arguments[0];if(e && e.keyCode==13){ $('.login-button').click();}};</script>

其中可以keyCode对应关系如下

下面为自己完整的写了个demo:要引入jquey.js,因为要使用到‘$‘表达式

<!DOCTYPE html><html lang="en"><title>button keydown</title><style>.login-button{cursor: pointer;width: 250px;text-align: center;height: 40px;line-height: 40px;background-color: dodgerblue;border-radius: 5px;margin: 0 auto;margin-top: 50px;color: white;}</style><div class="login-button">登录</div><body><script src="js/jquery.min.js"></script><script type="text/javascript">document.onkeydown=function(event){var e = event || window.event || arguments.callee.caller.arguments[0];if(e && e.keyCode==13){ $('.login-button').click();}};document.querySelector(".login-button").onclick = function(){alert("button_keydown_ok");}</script> </body></html>

按了键盘的'Enter'键,运行结果如下:

其中引用的一张keyCode图来自:/daysme/p/6272570.html里面有详细的keyCode介绍

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。