菜鳥學JS（四）——javascript爲按鈕註冊回車事件（設置默認按鈕）

時間 2019-11-06

標籤菜鳥 javascript 按鈕註冊回車事件設置默認欄目 JavaScript 简体版

原文原文鏈接

不得不說，在JS方面，本身真的是個徹徹底底的菜鳥。對於JS以及一些JS框架如JQuery等JS框架，本身也只是處在簡單應用的階段，固然本身也在不斷的學習當中，但願未來能跟你們分享更多JS方面的心得。今天先來點開胃的，說一下如何設置一個默認按鈕，就是無論焦點在不在按鈕上，只要按下回車，就等於觸發了按鈕的單擊事件。javascript

代碼很是簡單，要完成這個功能，只需幾行代碼： html

    //爲keyListener方法註冊按鍵事件
    document.onkeydown=keyListener; 

    function keyListener(e){ 

        //    當按下回車鍵，執行咱們的代碼
        if(e.keyCode == 13){ 

            //咱們要作的事情

        } 

    }

額，貌似有點太簡單了，就這樣完成一篇博客，我都有點很差意思了。最後爲你們附上一個小程序的實例吧： java

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>計算器</title>
        <script type="text/javascript" >
            function calculate() {        
                var a = document.getElementById("pre-tax").value;
                if (parseInt(a)>8000) {
                    document.getElementById("interest").value =800+ (a - 8000)*15/100;
                } else {
                    document.getElementById("interest").value =a/10;
                }        
            }
            
            //爲keyListener方法註冊按鍵事件
            document.onkeydown=keyListener; 

            function keyListener(e){ 

                //    當按下回車鍵，執行咱們的代碼
                if(e.keyCode == 13){ 

                    calculate();

                } 

            } 
        </script>
    </head>
    <body >
        稅前薪資：<input type="text" id="pre-tax"/>
        <input type="button" id="calculate" value="計算" onclick="calculate()"/>
        利息：<input type="text" id="interest" readonly="readonly"/>
    </body>
</html>

這個小實例很簡單，代碼很好懂，可是代碼背後的東西不是通常人能懂的。看懂的請舉手..... 小程序

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。