點擊enter和ctrol實現表單提交效果:大家一定都用過QQ聊天軟體,當發送信息的時候,可以選擇點擊回車或者點擊enter+ctrol,本人更加傾向於後者,因為可以有效的防止誤操作,因為回車也有換行的功能,也防止了兩者的衝突,下麵介紹一下如何使用enter和ctrol組合鍵實現提交表單效果。代碼如
點擊enter和ctrol實現表單提交效果:
大家一定都用過QQ聊天軟體,當發送信息的時候,可以選擇點擊回車或者點擊enter+ctrol,本人更加傾向於後者,因為可以有效的防止誤操作,因為回車也有換行的功能,也防止了兩者的衝突,下麵介紹一下如何使用enter和ctrol組合鍵實現提交表單效果。
代碼如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <script type="text/javascript"> window.onload=function(){ var oform=document.getElementById("theform"); oform.onkeydown=function(ev){ var ev=window.event||ev; if(ev.keyCode==13&&ev.ctrlKey){ oform.submit(); } } } </script> </head> <body> <form id="theform" action="softwhy.com"> <input type="text"> </form> </body> </html>
在以上代碼中,同時按下回車和ctrol鍵可以提交表單,下麵介紹一下它的實現過程。
一.實現原理:
當表單獲取焦點並按下按鍵的時候,就會觸發onkeydown事件處理函數,這個時候就會判斷回車鍵和ctrol鍵是否一起按下,ev.keyCode==13表示回車鍵已經按下,ev.ctrlKey表示ctrol鍵已經按下,上述條件滿足就會提交表單,oform.submit()實現。
二.代碼註釋:
1.onkeydown事件可以參閱javascript的onkeydown事件一章節。
2.keyCode屬性可以參閱javascript的keyCode屬性一章節。
3.ctrlKey屬性可以參閱javascript的ctrlKey事件屬性一章節。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=13726
更多內容可以參閱:http://www.softwhy.com/jquery/