1. 程式人生 > >html form中回車事件

html form中回車事件

要控制這些行為,不需要藉助JS,瀏覽器已經幫我們做了這些處理,這裡總結幾條規則:

  1. 如果表單裡有一個type=”submit”的按鈕,回車鍵生效。
  2. 如果 表單裡只有一個type=”text”的input,不管按鈕是什麼type,回車鍵生效。
  3. 如果按鈕不是用input,而是用button,並且沒有加type,IE下預設為type=button,FX預設為 type=submit。
  4. 其他表單元素如textarea、select不影 響,radio checkbox不影響觸發規則,但本身在FX下會響應回車鍵,在IE下不響應。
  5. type=”image”的input,效果等同於type=”submit”,不知道為什麼會設計這樣一種type,不推薦使用,應該用 CSS新增背景圖合適些。
實際應用的時候,要讓表單響應回車鍵很容易,保證表單裡有個type=”submit”的按鈕就行。而當只 有一個文字框又不希望響應回車鍵怎麼辦呢?我的方法有點彆扭,就是再寫一個無意義的文字框,隱藏起來。根據第3條規則,我們在用button的時候,儘量 顯式宣告type以使瀏覽器表現一致。

<form action="">

<input type="text">

<input type="button" value="提交">

</form>

<h2>一個文字框的時候怎麼才能做到不提交,方法是加一個隱藏掉的文字框</h2>

<form action="">

<input type="text">

<input type="text" style="display:none">

<input type="button" value="提交">

</form>

<h2>只要有type為submit的按鈕存在,一個文字框還是多個文字框都提交</h2>

<form action="">

<input type="text">

<input type="submit" value="提交">

</form>

<h2>只要有type為submit的按鈕存在,一個文字框還是多個文字框都提交</h2>

<form action="">

<input type="text">

<input type="text">

<input type="submit" value="提交">

</form>

<h2>多個文字框的時候,不提交,用type為button的按鈕就行啦</h2>

<form action="">

<input type="text">

<input type="text">

<input type="button" value="提交">

</form>

<h2>用button元素時,FX和IE下有不同的表現</h2>

<form action="">

<input type="text">

<input type="text">

<button>提交</button>

</form>

<h2>radio和checkbox在FX下也會觸發提交表單,在IE下不會</h2>

<form action="">

<input type="text">

<input type="radio" name="a">

<input type="checkbox" name="b">

<input type="checkbox" name="c">

<input type="button" value="提交">

</form>

<h2>type為image的按鈕,等同於type為submit的效果</h2>

<form action="">

<input type="text">

<input type="text">

<input type="image" src="xxx.gif">

</form>

相關推薦

html form回車事件

要控制這些行為,不需要藉助JS,瀏覽器已經幫我們做了這些處理,這裡總結幾條規則: 如果表單裡有一個type=”submit”的按鈕,回車鍵生效。如果 表單裡只有一個type=”text”的input,不管按鈕是什麼type,回車鍵生效。如果按鈕不是用input,而是用button,並且沒有加type,IE

HTML-jQuery事件與動畫

網頁中的事件 和WinForm一樣,在網頁中的互動也是需要事件來實現的,例如tab切換效果,可以通過滑鼠單擊事件來實現 jQuery中的事件: jQuery事件是對JavaScript事件的封裝,常用事件分類: 基礎事件:①滑鼠事件;②鍵盤事件;③window事件

vue+element Form鍵盤回車事件頁面刷新解決

ace for code com fault key item filter submit 問題描述:如下代碼所示,使用element-ui 中的el-form組件對table進行條件查詢,當查詢條件僅有一項時,使用@keyup.enter.native事件綁定回車事件,出

HTML Formbutton自動重新整理頁面

<form class="form form-horizontal" id="queryForm" > <div class="row cl"> <label class="form-label col-sm-3">服

jsp如何獲取HTML form的資料

原文連結:http://blog.csdn.net/q_l_s/article/details/19637147頁面間連結和資料傳遞的三種方式(1)通過JSP表單form將資料提交到下一個頁面;(2)通過JSP表單連結將資料提交到下一個頁面;(3)通過JSP表單Session

HTML form 避免(回車)表單自動提交

1、JavaScript提交表單程式碼 <span style="font-size:14px;"> <span style="font-size:18px;"> <span style="color:#FF0000;"&g

html formonsubmit的使用

html form 中的onsubmit在點submit按鈕時被觸發,如果return false;則結果不會被提交到action中去(也就是提交動作不會發生),如果不返回或者返回true,則執行提交動作。onsubmit和action兩個都是提交時出發的,不過:onsub

HTML】表單form一單回車就提交的text、一點選就提交的button

先上一段看似很簡單HTML程式碼: <!doctype html> <html> <body> <form action="2.html" method="post"> <input type=

htmlinput標籤回車事件分享

回車事件的捕獲   $('#search').bind('keypress', function (event) {             if (event.keyCode == "13") {

html頁面添加回車事件

<SCRIPT ID=clientEventHandlersJS LANGUAGE=javascript> function document_onkeypress() {     

關於表單form元素onsubmit事件處理機制的認識

讓我 clas 教程 是否 它的 默認方法 對象實例 action 事件處理機制   博主目前處於Js學習的初期,遇到了很多問題,比如今天的關於表單form元素中onsubmit事件問題,根據教程所述,onsubmit事件是在表單提交的時候觸發的,但是我看到教程上的onsu

form 的 table元素過濾定位事件

集合 pre orm col 樣式 htm ace fun 利用 <form> <table> <thead> <tr> <th>

HTML——form表單常用標簽總結

radio led ext only pin sta word htm and 1 <form action="" method="get"> 2 <!-- 3 placeholder="請輸

django djangoHTML控制元件及引數傳遞方法 以及 HTML form 裡的資料是怎麼被包成http request 的?如何在瀏覽器裡檢視到這些資料? 從HTML form submit 到 django response是怎麼完成的

  https://www.jb51.net/article/136738.htm django中的HTML控制元件及引數傳遞方法 下面小編就為大家分享一篇django中的HTML控制元件及引數傳遞方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧

react回車enter事件處理

對於常見的搜尋需求業務場景,使用者輸入完成後,點選enter事件請求資料,要求不提交頁面,實現資料區域性更新,這需要用到react中的表單Forms。 處理方法: (1)html書寫 form標籤中去掉action引數,定義onSubmit方法,如下所示: <div className="

HTML form表單action的正確寫法

mapping oca http context java ica 現在 ont ext   我的Java Web Application的context是myweb,即http://localhost:8080/myweb/index.jsp是歡迎頁。   現在我的一個C

趴一趴如何用最簡單的方式從html form表單獲取到資料

最近網速一直不太好 ~~~不開心 本文采用的是最簡單的方式,僅供自己試驗,畢竟存在一些不安全因素。 看了其他好的的方式發現都太麻煩,所以自己總結下。 是這樣的:input.html頁面中有一段程式碼。

對於html事件冒泡的問題

       今天在修改後臺的一個模組,中發現一個button在點選時,觸發了表單提交,我在onclick中加入了return,這個在提交之前就應該返回了,不該出現這個問題。轉念一想,我覺得我應該時事件冒泡了,也就是一個子元素的事件觸發了父元素的事件的觸發。       簡單

HTML頁面的按鍵事件

導航 一、通過event.keyCode來實現按鍵事件 二、通過event.which來實現按鍵事件 不同的瀏覽器可能對按鍵事件有不同的處理方式,這裡介紹兩種實現的方式

form表單onclick事件和onsubmit事件的執行順序

說來很慚愧,今天因為form表單的一個小問題困擾了一下午。雖然最終得以解決,但花費的時間實在是令人汗顏,現在總結一下遇到的問題。 先說一下背景,之前幫一個朋友的專案寫了一個原生js的表單驗證,今天