使用 js onkeyDown事件有个小坑!

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

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

代码如下:

 <section id="content" οnkeydοwn="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="" οnclick="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才是王道






评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

凌晨4点5杀老大爷

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值