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>

  • 相关阅读:
    [LC] 131. Palindrome Partitioning
    [LC] 216. Combination Sum III
    [LC] 90. Subsets II
    [Algo] 73. Combinations Of Coins
    [Algo] 66. All Valid Permutations Of Parentheses I
    Hive 和 HBase区别
    form表单 多种提交方式 [转]
    HDFS 好的文章链接
    js 获取字符串的 像素 宽度 ----字符串格式化输出
    python 本地变量和全局变量 locals() globals() global nonlocal 闭包 以及和 scala 闭包的区别
  • 原文地址:https://www.cnblogs.com/lsz-blog/p/3169083.html
Copyright © 2011-2022 走看看