zoukankan      html  css  js  c++  java
  • asp.net中用回车代替按钮事件

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

  • 相关阅读:
    Kubernates集群搭建
    Spring Security——基于表达式的权限控制
    JVM常用命令参数
    Spring 注解原理
    Linux SSH免登陆配置步骤
    错误日志收集sentry的安装与简单使用
    java.lang.UnsupportedClassVersionError
    docker maven 出错:Failed to execute goal com.spotify:docker-maven-plugin:...: Request error: POST https://192.168.99.100:2376/build?t=
    redis哨兵配置主从
    spring-data-redis使用哨兵配置一主多从
  • 原文地址:https://www.cnblogs.com/lsz-blog/p/3169083.html
Copyright © 2011-2022 走看看