form内任意一个输入框按enter会触发的submit的click事件

<!DOCTYPE html>

<html>

<head>

</head>

<body>

用户名：<input type="text" name="" id="" value="" />

密码：<input type="text" name="" id="" value="" />

确认密码：<input type="text" name="" id="" value="" />

</form>

</body>

document.querySelector('input[type=submit]').onclick=function(){

console.log(this);

console.log(event.target);

};

</script>

</html>

form内任意一个输入框按enter会触发的submit的click事件，这是浏览器自动处理的吗，怎么禁止啊

王文辉 2020-04-26

源自：项目：JS表单验证案例 3-10 作业题

收起

2回答

好帮手慕星星回答被采纳获得+3积分 2020-04-27 16:31:45

同学你好，一般情况下没有按下enter键跳转到下一个输入框的情况。如果想要js实现也是可以的。例如：

<!DOCTYPE html>
 
<html>
 
<head>
 
    <meta charset="utf-8">
 
    <title></title>
 
</head>
 
<body>
 
    <form method="post">
 
        用户名：<input type="text" name="" id="" value="" onkeydown="changeEnter()" /> 密码：
 
        <input type="text" name="" id="" value="" onkeydown="changeEnter()" /> 确认密码：
 
        <input type="text" name="" id="" value="" onkeydown="changeEnter()" />
 
        <!-- <input type="submit" value="提交" /> -->
        <!-- 按钮变为普通的 -->
        <input type="button" value="提交" />
 
    </form>
 
</body>
 
<script type="text/javascript">
    var i = 0;
    var input = document.getElementsByTagName('input')
 
    function changeEnter() {
        // 判断是否为回车
        if (event.keyCode == 13) {
            // 如果超出了最后一个元素，将i设置为0，从头开始
            if (i >= input.length - 2) { //去掉最后一个按钮input
                i = 0;
                input[i].focus();
            } else {
                // 设置下一个聚焦
                input[++i].focus();
            }
 
        }
    }
</script>
 
</html>