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

  • 相关阅读:
    python16_day03【集合、编码、函数、递归、内置函数】
    python16_day02【列表、字典】
    django 自定义用户表替换系统默认表
    用国内镜像源pip加速安装模块
    python虚拟环境的搭建命令mkvirtualenv
    测试分类
    bug理论
    测试用例的优先级
    测试流程
    测试理论
  • 原文地址:https://www.cnblogs.com/lsz-blog/p/3169083.html
Copyright © 2020-2023  润新知