js实现button标签转为click监听事件

公司通过海思板子做了一个纯html页面,登录用户数据通过sqlite3存储,所以登录按钮通过button标签实现的,现在要通过键盘回车登录操作,所以需要将button按钮转click事件操作
在这里插入图片描述

1,登录界面
在这里插入图片描述
2,页面实现
HTML

<form method="post" id="login" class="login-form fade-in-effect">
                <div class="message" id="logomessage"><span  id="logoname">云录播</span></div>
                <div id="darkbannerwrap"></div>
                <div class="form-group">
                    <label class="control-label" for="username">用户名</label>
                    <input type="text" class="form-control input-dark" name="username"  id="username" autocomplete="off" />
                </div>
                <div class="form-group">
                    <label class="control-label" for="passwd">密码</label>
                    <input type="password" class="form-control input-dark"  name="password" id="passwd" onfocus="capitalTip('passwd')" autocomplete="off" onpaste="return false"/>
                    <div class="capslock" id="capital_passwd" style="display:none"><span>大写锁定已开启</span></div>
                </div>
               <!-- <div class="form-group" style="overflow:hidden;">
                    <label class="control-label" for="captcha" style="width:50%;">验证码</label>
                    <input name="captcha" id="captcha" type="text" class="form-control input-dark" style="float:left;width:50%;" value="">
                    <img   id="captchaImage" style="float:right;    padding: 1%;" title="点击刷新" onclick="this.src='captcha/images.do?d='+new Date().getTime()" class="yzm-img" style="width:110px;height:auto;" />
                </div>-->
                <label>
                    <input id="remFlag"  name="remFlag" type="checkbox"  onclick="remember();">
                    <label for="remFlag" style="color: #555;position: relative;top: -2px;">记住我</label>
                </label>
               <!-- <div class="form-group">
                    <label class="control-label" for="passwd">语言选择</label>
                    <select class="form-control" name="langue" onchange="checkField()" id="langue" style="border-radius:3px;">
                        <option value="zh" selected>中文</option>
                        <option value="en">英文</option>
                    </select>
                </div>-->
                <div class="form-group">
                    <button type="button" id="chsubmit" onclick="finishLogin()" class="btn btn-dark  btn-block text-left"> <i class="fa-lock"></i> 登陆 </button>
                </div>
            </form>

JS

<script type="text/javascript">
    //用户名和密码回车监听事件
    var inputusername = document.getElementById("username");
    inputusername.addEventListener("keyup", function(event) {
    
    
        event.preventDefault();
        if (event.keyCode === 13) {
    
    
            document.getElementById("chsubmit").click();
        }
    });//用户名
    var input = document.getElementById("passwd");
    input.addEventListener("keyup", function(event) {
    
    
        event.preventDefault();
        if (event.keyCode === 13) {
    
    
            document.getElementById("chsubmit").click();
        }
    });//密码
</script>    

参考地址: https://c.runoob.com/codedemo/5399/

猜你喜欢

转载自blog.csdn.net/weixin_44975322/article/details/121291850