• Js监控回车事件


    标题通俗的说,也就是绑定当用户按下回车键要执行的事件。

    下面,入正题。

    第一步,先编写简单的页面代码,这里我们只需要一个按钮就足够了。当然,还有按钮事件。 <html>

    <head>

     <title>测试绑定enter</title>

    <script type="text/javascript">

    function b_onclick() {     alert("你好!"); }

    </script>

    </head>

    <body>

    <input type="button" value="测试按钮" id="test" onclick="b_onclick()" /> </body>

    </html>

     第二步,于b_onclick()函数加入如下js代码:        

     function document.onkeydown()            

    {                 //使用document.getElementById获取到按钮对象               

      var button = document.getElementById("test");                

    if(event.keyCode == 13)                    

     {                        

     button.click();                       

      event.returnValue = false;                    

     }            

     }

    然后于IE中运行,你会发现,即使焦点不在按钮上,当你按下回车,依然执行了按钮的函数。稍微解释一下代码:     event.keyCode == 13是判断按下的是那一个间,13代表的是回车键。     button.click();执行按钮事件。     event.returnValue = false;这个是为了防止浏览器捕捉到用户按下回车键而进行其他操作。例如假如输入框中,没有这行代码的话,在执行完按钮事件后,其还会执行换行的动作。第三步,很多人都认为做完上面的工作已经完成了整个作业。其实不是的。你尝试使用firefox浏览,就会发现,代码并不会执行。显然,这是因为firefox不支持event事件对象。为了做到跨浏览器,不得不将代码进行优化。我们可以这个做:

    首先,为boby添加一个onkeydown监控函数,如<body onkeydown="BindEnter(event)">。其次修改原来的绑定函数为:

     function BindEnter(obj)

     {     //使用document.getElementById获取到按钮对象   

      var button = document.getElementById('test');    

     if(obj.keyCode == 13)        

     {            

    button.click();            

     obj.returnValue = false;        

     }

    } 为什么要将事件对象作为参数传递呢?这是为了避免进行浏览器判别,节省代码。 OK,到这里已经基本完成了。完整代码如下:

    <html>

     <head>

    <title>测试绑定enter</title>

    <script type="text/javascript"> function b_onclick() {     alert("你好!"); } function BindEnter(obj) {    

     //使用document.getElementById获取到按钮对象    

    var button = document.getElementById('test');    

     if(obj.keyCode == 13)        

    {             button.click();           

      obj.returnValue = false;        

     }

    }

    </script>

     </head>

    <body onkeydown="BindEnter(event)">

     <input type="button" value="测试按钮" id="test" onclick="b_onclick()" /> </body> </html> 

  • 相关阅读:
    Spring Boot 2.X(十九):集成 mybatis-plus 高效开发
    Spring Cloud(二):Eureka 服务注册中心
    Spring Boot 2.X(十八):集成 Spring Security-登录认证和权限控制
    Spring Boot 2.X(十七):应用监控之 Spring Boot Admin 使用及配置
    Spring Boot 2.X(十六):应用监控之 Spring Boot Actuator 使用及配置
    Spring Boot 2.X(十五):集成 Swagger2 开发 API 文档(在线+离线)
    Spring Boot 2.X(十四):日志功能 Logback
    Spring Boot 2.X(十三):邮件服务
    Spring Boot 2.X(十二):定时任务
    Spring Boot 2.X(十一):全局异常处理
  • 原文地址:https://www.cnblogs.com/zhaojia-dream/p/3214778.html
Copyright © 2020-2023  润新知