JavaScript 点击回车验证提交表单

2018-11-1 01:40| 作者: admin| 查看: 158| 评论: 0|来自: 蚂蚁部落

回车键是应用最为频繁的按键之一,对其恰当的应用可以节省很多操作。

比如在使用QQ聊天的时候,点击回车就可以发送信息,而不是使用鼠标点击。

与上面情形类似,表单提交验证的时候,也可以利用回车键来提升一下用户体验。

表单填写完毕之后,无需挪动鼠标点击提交按钮,只要点击回车即可实现表单验证与提交功能。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<script> 
window.onload=function(){
  let txt=document.getElementById("txt");
  let st=document.getElementById("st");
  let form=document.forms[0];
  form.onsubmit=function(){
    if(txt.value==""){
      alert("请先写一些内容");
      txt.focus();
      return false;
    }
  }
  document.onkeydown = function(e){
    if(ev.keyCode==13&&document.activeElement === form) {
      form.submit();
    }
  }
}
</script> 
</head> 
<body> 
<form action="#" id="fm">
  <input type="text" id="txt" name="txt">
  <input type="submit" id="st" name="st">
</form>
</body> 
</html>

上述代码可以实现文本框提交内容是否为空的简单验证。

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/01/014043rfvesevpvzpy0y1h.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

点击提交按钮和回车都会实现验证功能,下面详细分析一下实现过程。

(1).首先为form表单注册submit事件处理函数,此事件处理函数能够实现文本是否为空的验证。

(2).点击提交按钮可以触发验证事件,这个很简单,不多介绍,下面着重介绍如何实现点击回车验证表单。

(3).为document注册keydown事件,在页面中点击任何按键都可以触发此事件,下面的任务是筛选点击回车按键。

(4).如果ev.keyCode等于13,那么说明当前按键就是回车键。

(5).但是最好不要再页面任何情况下点击回车键都会触发submit事件,可能其他功能也有对回车的响应功能。

(6).所以最好当焦点依然处于form中时,能够响应回车.

(7).document.activeElement === form可以实现焦点是否在表单中的判断。

上面已经将功能具体实现过程进行了一下介绍,更多内容可以参阅下面文章。

相关阅读:

(1).keyCode参阅JavaScript keyCode一章节。

(2).document.activeElement参阅document.activeElement一章节。

(3).return false参阅JavaScript return false一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部