阻止點選回車實現的表單提交程式碼例項

antzone發表於2017-04-08

本章節分享一段程式碼例項，它實現了阻止點選回車提交表單的功能。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript">
function enter_down(ev){
  var ev=window.event||ev;
  if(ev.keyCode==13){
    stopDefault(ev);
  }
}
function stopDefault(ev){
  if(ev&&ev.preventDefault){
    ev.preventDefault();
  } 
  else{
    window.event.returnValue=false;
  }
  return false;
}
window.onload=function(){
  var form=document.getElementById("myform");
  form.onkeydown=function(ev){
    enter_down(ev)
  }
}
</script>
</head>
<body>
<form id="myform" action="softwhy.com">
  <input type="text" name="name"/>
  <input type="text" name="name"/>
  <input type="submit" id="bt" value="提交表單"/>
</form>
</body>
</html>

上面的程式碼實現了我們的要求，點選回車也不會提交表單，下面介紹一下它的實現過程。

一.實現原理:

當表單獲取焦點的時候，點選回車提交表單是瀏覽器的一個預設動作，所以只要取消這個預設動作就可以消除此現象，具體如何實現看下面的程式碼註釋和相關閱讀。

二.程式碼註釋:

（1）.function enter_down(ev){}，函式的引數是事件物件。（2）.var ev=window.event||ev，實現相容所有瀏覽器的事件物件。

（3）.if(ev.keyCode==13){  stopDefault(ev);

}，如果按鍵碼等於13，也就是說點選了Enter鍵，那麼就呼叫stopDefault()，此函式阻止預設動作的發生。

（4）.function stopDefault(ev){

  if(ev&&ev.preventDefault){

    ev.preventDefault();

  } 

  else{

    window.event.returnValue=false;

  }

  return false;

}此函式實現了阻止預設動作的功能，裡面是進行的相容性處理。

三.相關閱讀:

（1）.var ev=window.event||ev可以參閱var ev=window.event||ev的作用是什麼一章節。

（2）.keyCode可以參閱javascript keyCode屬性一章節。

（3）.preventDefault()可以參閱javascript preventDefault()一章節。

（4）.returnValue可以參閱js returnValue屬性一章節。

相關文章