1. 程式人生 > >JS-表單事件

JS-表單事件

①onblur(DOM2):事件會在元素失去焦點時觸發。(如:使用者離開輸入框時執行,經常用於JS驗證程式碼)

瀏覽器都支援~

標籤都支援,除了那11種: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 和 <title>.

用法:前兩種~

 <input type="text" id="fname" onblur="myFunction()">

  function myFunction(){
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
  }

②onfocus(DOM2):事件在物件獲得焦點時發生。(通常用於<input>、<select>、<a>)(不支援冒泡)

提示:onfocus的事件的相反事件是onblur事件

瀏覽器都支援~

標籤都支援,除了那11種: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 和 <title>.

用法:三種~

③onfocusin(DOM2):事件在一個元素即將獲得焦點時觸發。(支援冒泡,不可以取消,事件型別是FocusEvent)

提示:ff瀏覽器不支援onfocusin事件,但你可以使用onfocus(使用addEventlistener()方法的可選引數useCapture)的捕獲監聽事件來檢視元素或其子元素是否獲取焦點。

提示:onfocusin的事件的相反事件是onfocusout事件

支援的瀏覽器:Chrome(Yes)、IE(Yes)、FF(NO)、Safari(Yes)、Opera(Yes)

注意:在 Chrome, Safari 和 Opera 15+ 瀏覽器中使用 HTML DOM 語法的 onfocusin 事件可能無法正常工作。但是,他作為一個 HTML 元素,通過使用 addEventListener() 方法可以正常工作。

標籤都支援,除了那11種: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 和 <title>.

用法:三種~

④onfocusout(DOM2):事件在元素即將失去焦點時觸發。(支援冒泡,不可以取消,事件型別是FocusEvent)

提示:ff瀏覽器不支援onfocusout事件,但你可以使用onfocus(使用addEventlistener()方法的可選引數useCapture)的捕獲監聽事件來檢視元素或其子元素是否獲取焦點。

提示:onfocusout的事件的相反事件是onfocusin事件

支援的瀏覽器:Chrome(Yes)、IE(Yes)、FF(NO)、Safari(Yes)、Opera(Yes)

注意:在 Chrome, Safari 和 Opera 15+ 瀏覽器中使用 HTML DOM 語法的 onfocusout 事件可能無法正常工作。但是,他作為一個 HTML 元素,通過使用 addEventListener() 方法可以正常工作。

標籤都支援,除了那11種: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 和 <title>.

用法:三種~

⑤onchange:事件會在域的內容改變時發生、也可用於單選框與複選框改變後觸發的事件。

瀏覽器都支援~

用法:前兩種~

支援的標籤:<input>、<select>、<textarea>

⑥oninput:事件在使用者輸入時觸發。

提示: 該事件類似於onchange 事件。不同之處在於 oninput 事件在元素值發生變化是立即觸發, onchange 在元素失去焦點時觸發。另外一點不同是 onchange 事件也可以作用於 <keygen> 和 <select> 元素。

支援的第一個瀏覽器型號:Chrome(Yes)、IE(9.0)、FF(4.0)、Safari(5.0)、Opera(Yes)

用法:

⑦onreset:事件在表單被重置後觸發。(支援冒泡,可以取消,事件型別是Event,支援的標籤是<form>、<keygen>)

支援的瀏覽器:Chrome(Yes)、IE(Yes)、FF(Yes)、Safari(Yes)、Opera(Yes)

用法:三種~      +  object.reset();的效果也是一樣

⑧onsearch:事件在使用者按下“Enter(回車)”按鍵或點選type="search"的<input>元素的“x(搜尋)”按鈕時觸發。(支援冒泡,不可以取消,事件型別是Event,支援的標籤是<input>)

支援的第一個瀏覽器型號:Chrome(Yes)、IE(不支援)、FF(不支援)、Safari(Yes)、Opera(15.0)

用法:三種~

支援的標籤:<input type="search">

⑨onselect:事件會在文字框的文字被選中時發生。

所有瀏覽器都支援~

用法:前兩種~

支援的標籤: <input type="file">, <input type="password">, <input type="text">, <keygen>, 和 <textarea>.

⑩onsubmit:事件在表單提交時觸發。(支援冒泡,不可以取消,事件型別是Event,支援的標籤是<form>、<keygen>)

支援的瀏覽器:Chrome(Yes)、IE(Yes)、FF(Yes)、Safari(Yes)、Opera(Yes)

用法:三種~