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>

  • 相关阅读:
    上传图片,将图片保存在腾讯云(2种方式)
    由ping所引发的思考~
    php面试上机题(2018-3-3)
    【八】jqeury之click事件[添加及删除数据]
    【七】jquery之属性attr、 removeAttr、prop[全选全不选及反选]
    【六】jquery之HTML代码/文本/值[下拉列表框、多选框、单选框的选中]
    【五】jquery之事件(focus事件与blur事件)[提示语的出现及消失时机]
    小白懂算法之基数排序
    mysql_sql199语法介绍
    Python基本编程快速入门
  • 原文地址:https://www.cnblogs.com/lsz-blog/p/3169083.html
Copyright © 2011-2022 走看看