• 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>

  • 相关阅读:
    Windows&Android&ios后台机制总结
    启动Mongodb服务
    js获取一个月有多少天
    NaN类型和数字相加为NaN
    sql将datetime类型与字符串进行比较
    存储过程拼接sql
    将list转换成用逗号连接的字符串
    sql在查询结果集上新增一列
    让两个div排列在一行
    返回不同数据库类型的IDBConnection
  • 原文地址:https://www.cnblogs.com/lsz-blog/p/3169083.html
Copyright © 2020-2023  润新知