使用 js onkeyDown事件有个小坑！

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Asa_Jim/article/details/66968154

使用场景：在页面登陆页面按回车键 就自动调用登陆方法实现登陆。

坑描述:在div 等非输入标签中写onkeyDown 事件方法 会不起作用！，必须满足两个条件1. focus  2 设置tabindex值,然后在页面onload 后focus。

代码如下:

 <section id="content" onkeydown="keyDown()" tabindex="-1">
        <div class="container">
            <div class="">
                <div class="">
                    <div class="">
                        <p class="">登 录</p>
                    </div>
                    <form method="post" action="" id="contact">
                        <div class="">
                            
                                <div class="section">
                                    <label >用户名</label>
                                    <label for="username" class="field prepend-icon">
                                        <input type="text" name="examineeCode" class="" placeholder="请输入用户名">
                                        <label for="username" class="field-icon">
                                            <i class="fa fa-user"></i>
                                        </label>
                                    </label>
                                </div>
                               
                                <div class="section">
                                    <label  class="">密码</label>
                                    <label for="password" class="field prepend-icon">
                                        <input type="password" name="password" id="password" class="" placeholder="请输入密码">
                                        <label for="password" class="">
                                            <i class=""></i>
                                        </label>
                                    </label>
                                </div>
                               
                            </div>
                        </div>
                        <div class="">
                            <a type="button" class="" onclick="login()">点 击 登 录</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>

js

function keyDown() {
    if (event.keyCode == 13) {
        event.returnValue = false;
        event.cancel = true;
        login(); //登陆方法
    }
}

 window.onload = function () {
        var content = document.getElementById("content");
        if (content != null)
        {
            content.focus();
        }
    }

总结:在页面中如果调用onkeyDonw事件，对于非录入式 的标签需要设置focus 和tabindex 值 要引起注意！

but ......................... 

以上都不是重点，重点是下面一个方法就可以解决所有问题，连页面也不需要改啥 

 window.onload = function () {
        window.onkeydown = keyDown; //一行代码解决所有问题

    }

最后总结:活学活用js才是王道