如何防止INPUT按回車自動提交表單FORM

更新時間：2016年12月06日 11:55:57 作者：beautifulsarah

為了防止INPUT按回車form自動提交，可以以下兩種方法：增加一個隱藏的input。為input增加一個按鍵事件來阻止form提交。具體詳情可以參考下本文

form中的input只有一個，input獲得焦點時按回車會form自動提交：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<form action="http://blog.csdn.net/gnail_oug" method="post">
<!--input獲得焦點后按回車form自動提交-->
<input type="text">
</form>
</body>
</html>

有多個input時(不管是否是隱藏的)，任意一個input獲得焦點都不會提交。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<form action="http://blog.csdn.net/gnail_oug" method="post">
<!--下面兩個input獲得焦點后按回車form都不會自動提交-->
<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">
<!--下面這個input獲得焦點后按回車form不會自動提交-->
<input type="text">
<!-- 這里是通過樣式隱藏，不等于<input type="hidden"> ,使用type="hidden"同樣會提交 -->
<input type="text" style="display: none;">
</form>
</body>
</html>

單個input時，通過事件阻止form提交：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<form action="http://blog.csdn.net/gnail_oug" method="post">
<!--下面兩個input獲得焦點后按回車form不會自動提交-->
<input type="text" onkeydown="if(event.keyCode==13)return false;">
</form>
</body>
</html>

所以，為了防止INPUT按回車form自動提交，可以以下兩種方法：

增加一個隱藏的input。

為input增加一個按鍵事件來阻止form提交。

以上所述是小編給大家介紹的防止INPUT按回車自動提交表單FORM的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

您可能感興趣的文章:

微信小程序用戶授權、位置授權及獲取微信綁定手機號
這篇文章主要介紹了信小程序用戶授權、位置授權及獲取微信綁定手機號,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2019-07-07
JavaScript實現復制內容到粘貼板代碼
最近做了一個前端項目，其中有需求：通過button直接把input或者textarea里的值復制到粘貼板里。下面小編給大家分享JavaScript實現復制內容到粘貼板代碼，需要的朋友參考下
2016-03-03
利用JavaScript對中文（漢字）進行排序實例詳解
排序是我們在日常開發(fā)中經常遇到的一個功能，下面這篇文章主要給大家介紹了利用JavaScript對中文（漢字）進行排序的相關資料，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面跟著小編一起來看看吧。
2017-06-06
JS實現拖動滑塊驗證
這篇文章主要為大家詳細介紹了JS實現拖動滑塊驗證，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-03-03
PHP讀取遠程txt文檔到數組并實現遍歷
這篇文章主要介紹了PHP讀取遠程txt文檔到數組并實現遍歷,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2020-08-08
js和jquery使按鈕失效為不可用狀態(tài)的方法
js和jquery如何使按鈕失效，很簡單，只要設置disabled屬性為true即為不可用狀態(tài)即可，下面有個簡單的示例，大家可以參考下
2014-01-01
JS獲取本地地址及天氣的方法實例小結
這篇文章主要介紹了JS獲取本地地址及天氣的方法,結合實例形式總結分析了javascript通過瀏覽器、第三方API實現獲取本地地址與天氣的相關操作技巧,需要的朋友可以參考下
2019-05-05
詳解JS中的柯里化(currying)
這篇文章主要介紹了JS中的柯里化(currying),需要的朋友可以參考下
2017-08-08
淺析javascript中的Event事件
本文主要對javascript中的（Event）事件進行介紹，文章篇尾舉了幾個案例：方塊隨著鼠標移動；輸入框文字提示；仿select控件；留言本；自定義右鍵菜單；鍵盤控制div運動。需要的朋友可以看下
2016-12-12
微信小程序實現播放音頻功能
這篇文章主要為大家詳細介紹了微信小程序實現播放音頻功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-07-07