如何防止INPUT按回車自動(dòng)提交表單FORM
更新時(shí)間：2016年12月06日 11:55:57 作者：beautifulsarah
為了防止INPUT按回車form自動(dòng)提交，可以以下兩種方法：增加一個(gè)隱藏的input。為input增加一個(gè)按鍵事件來阻止form提交。具體詳情可以參考下本文
form中的input只有一個(gè)，input獲得焦點(diǎn)時(shí)按回車會(huì)form自動(dòng)提交：
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <form action="http://blog.csdn.net/gnail_oug" method="post"> <!--input獲得焦點(diǎn)后按回車form自動(dòng)提交--> <input type="text"> </form> </body> </html>
有多個(gè)input時(shí)(不管是否是隱藏的)，任意一個(gè)input獲得焦點(diǎn)都不會(huì)提交。
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <form action="http://blog.csdn.net/gnail_oug" method="post"> <!--下面兩個(gè)input獲得焦點(diǎn)后按回車form都不會(huì)自動(dòng)提交--> <input type="text"> <input type="text"> </form> </body> </html>
或
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <form action="http://blog.csdn.net/gnail_oug" method="post"> <!--下面這個(gè)input獲得焦點(diǎn)后按回車form不會(huì)自動(dòng)提交--> <input type="text"> <!-- 這里是通過樣式隱藏，不等于<input type="hidden"> ,使用type="hidden"同樣會(huì)提交 --> <input type="text" style="display: none;"> </form> </body> </html>
單個(gè)input時(shí)，通過事件阻止form提交：
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <form action="http://blog.csdn.net/gnail_oug" method="post"> <!--下面兩個(gè)input獲得焦點(diǎn)后按回車form不會(huì)自動(dòng)提交--> <input type="text" onkeydown="if(event.keyCode==13)return false;"> </form> </body> </html>
所以，為了防止INPUT按回車form自動(dòng)提交，可以以下兩種方法：
增加一個(gè)隱藏的input。
為input增加一個(gè)按鍵事件來阻止form提交。
以上所述是小編給大家介紹的防止INPUT按回車自動(dòng)提交表單FORM的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
微信小程序用戶授權(quán)、位置授權(quán)及獲取微信綁定手機(jī)號(hào)
這篇文章主要介紹了信小程序用戶授權(quán)、位置授權(quán)及獲取微信綁定手機(jī)號(hào),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07
JavaScript實(shí)現(xiàn)復(fù)制內(nèi)容到粘貼板代碼
最近做了一個(gè)前端項(xiàng)目，其中有需求：通過button直接把input或者textarea里的值復(fù)制到粘貼板里。下面小編給大家分享JavaScript實(shí)現(xiàn)復(fù)制內(nèi)容到粘貼板代碼，需要的朋友參考下2016-03-03
JS實(shí)現(xiàn)拖動(dòng)滑塊驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)拖動(dòng)滑塊驗(yàn)證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03 
PHP讀取遠(yuǎn)程txt文檔到數(shù)組并實(shí)現(xiàn)遍歷
這篇文章主要介紹了PHP讀取遠(yuǎn)程txt文檔到數(shù)組并實(shí)現(xiàn)遍歷,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-08-08 
js和jquery如何使按鈕失效，很簡單，只要設(shè)置disabled屬性為true即為不可用狀態(tài)即可，下面有個(gè)簡單的示例，大家可以參考下
2014-01-01 
這篇文章主要介紹了JS獲取本地地址及天氣的方法,結(jié)合實(shí)例形式總結(jié)分析了javascript通過瀏覽器、第三方API實(shí)現(xiàn)獲取本地地址與天氣的相關(guān)操作技巧,需要的朋友可以參考下
2019-05-05 
這篇文章主要介紹了JS中的柯里化(currying),需要的朋友可以參考下
2017-08-08 
本文主要對javascript中的（Event）事件進(jìn)行介紹，文章篇尾舉了幾個(gè)案例：方塊隨著鼠標(biāo)移動(dòng)；輸入框文字提示；仿select控件；留言本；自定義右鍵菜單；鍵盤控制div運(yùn)動(dòng)。需要的朋友可以看下
2016-12-12 
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)播放音頻功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07