回车提交表单

Posted 2020-07-12 择哥灬仰望星空

填写完表单数据之后，很多用户喜欢直接按回车提交，感觉速度比较快，省去了拿鼠标找“提交”按钮再单击的时间。

今天我们就来实现一下：

原理：

1，获取“Enter”按键的code:

　兼容不同的浏览器的写法如下：

var keyCode = e.keyCode || e.which || e.charCode

2，监听键盘onkeyup事件：

window.onkeyup = function(e){
  e = e || window.event; //获取事件对象  
}

3，判断code键码是否为13(代表enter的键码)

var keyCode = e.keyCode || e.which || e.charCode; //获取键码
if(keyCode === 13){
  alert(\'你按下了enter键\');
}else{
  alert(\'你不是按的enter键\')
}

详细的javascript代码：

window.onkeyup = function(e){
    e = e || window.event;
    var keyCode = e.keyCode || e.which || e.charCode;
    if(keyCode === 13){
        if(userName.value.length > 0){
            alert(\'提交成功！\')
        }else{
            userName.focus();
        }
    }
}        

HTML：

<input id="userName" type="text" placeholder="请输入用户名">

 

扫描二维码关注微信公众号：