javascript 按回車鍵相應(yīng)按鈕提交事件
更新時間:2009年11月02日 17:11:50 作者:
在表單提交前經(jīng)常遇到表單驗證問題而常用的方法有以下兩種.
1、使用提交按鈕提交,在form表單中的onsubmit事件進行表單驗證:
<script type="text/javascript">
function onSub(){
//表單驗證代碼
}
</script>
<form action="" method="" onsubmit="javascript:onSub();">
2、使用button或圖片的onclick事件調(diào)用表單驗證代碼:
<input type="button" name="button" id="button" onclick="javascript:onSub();" />
<img src="圖片路徑" onclick="javascript:onSub();" />
但是,使用第二種方式進行提交表單時,不能在填寫完表單時,按回車不能提交表單。這給客戶的
感受是和直接使用提交按鈕提交表單是不同的;為了實現(xiàn)此項功能只需在你的頁面加上如下javascript代碼即可
function butOnClick() {
if (event.keyCode == 13) {
var button = document.getElementById("bsubmit"); //bsubmit 為botton按鈕的id
button.click();
return false;
}
}
在你表單最有一個輸入項中出發(fā)onkeydown事件調(diào)用butOnClick()函數(shù)即可;例如:登陸程序的最后一項是密碼,則
<input type="password" name="userPwd" onkeydown="javascript:butOnClick();" />
這樣當你輸入完密碼后,按下回車鍵即可實現(xiàn)表單驗證和登錄操作(如果用戶名和密碼正確)。這是個人的一點總結(jié),共享出來
大家齊分享!
復(fù)制代碼 代碼如下:
<script type="text/javascript">
function onSub(){
//表單驗證代碼
}
</script>
<form action="" method="" onsubmit="javascript:onSub();">
2、使用button或圖片的onclick事件調(diào)用表單驗證代碼:
復(fù)制代碼 代碼如下:
<input type="button" name="button" id="button" onclick="javascript:onSub();" />
<img src="圖片路徑" onclick="javascript:onSub();" />
但是,使用第二種方式進行提交表單時,不能在填寫完表單時,按回車不能提交表單。這給客戶的
感受是和直接使用提交按鈕提交表單是不同的;為了實現(xiàn)此項功能只需在你的頁面加上如下javascript代碼即可
復(fù)制代碼 代碼如下:
function butOnClick() {
if (event.keyCode == 13) {
var button = document.getElementById("bsubmit"); //bsubmit 為botton按鈕的id
button.click();
return false;
}
}
在你表單最有一個輸入項中出發(fā)onkeydown事件調(diào)用butOnClick()函數(shù)即可;例如:登陸程序的最后一項是密碼,則
<input type="password" name="userPwd" onkeydown="javascript:butOnClick();" />
這樣當你輸入完密碼后,按下回車鍵即可實現(xiàn)表單驗證和登錄操作(如果用戶名和密碼正確)。這是個人的一點總結(jié),共享出來
大家齊分享!
您可能感興趣的文章:
相關(guān)文章
JavaScript實現(xiàn)Sleep函數(shù)的代碼
大家知道,JavaScript中沒有內(nèi)置我們常用的sleep()函數(shù),只有定時器setTimeout()和循環(huán)定時器setInterval()2007-03-03經(jīng)典面試題之JavaScript?for循環(huán)(var?let)
如果你也在面試找工作,那么也一定遇到過這道for循環(huán)打印結(jié)果的題,下面我們來探討下,對經(jīng)典面試題之js?for循環(huán)相關(guān)知識感興趣的朋友跟隨小編一起看看吧2023-10-10layui表格數(shù)據(jù)復(fù)選框回顯設(shè)置方法
今天小編就為大家分享一篇layui表格數(shù)據(jù)復(fù)選框回顯設(shè)置方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09