1. 程式人生 > >說說 input 輸入框的事件

說說 input 輸入框的事件

TP input 不可 而是 什麽是 沒有 為什麽 技術 結果

從input框獲取焦點到,輸入值,失去焦點這個過程所有事件,以及一些特點;

1、過程

  onfocus -> 鍵盤輸入 -> onkeydown -> onkeypress -> onkeyup -> oninput -> 失去焦點 -> onchange -> onblur

  如下,奉上代碼;

function handleFocus (event) {
        console.log(onfocus事件, value= + event.target.value, keyCode= + event.keyCode);
    };

    function handleKeyDown (
event) { console.log(onkeydown事件, value= + event.target.value, keyCode= + event.keyCode); } function handleKeyPress (event) { console.log(onkeypree事件, value= + event.target.value, keyCode= + event.keyCode); } function handleKeyUp (event) { console.log(
onkeyup事件, value= + event.target.value, keyCode= + event.keyCode); } function handleInput (event) { console.log(oninput事件, value= + event.target.value, keyCode= + event.keyCode); } function handleChange (event) { console.log(onchange事件..., value= + event
.target.value, keyCode= + event.keyCode); }; function handleBlur (event) { console.log(onblue事件, value= + event.target.value, keyCode= + event.keyCode) }

  執行結果:

  技術分享圖片

  其實這個過程並沒有很意外,唯一感覺不太對勁的是 onchange 事件並不是每次輸入框值改變的時候觸發的,而是在失去焦點時候,並且在 onblur 之前觸發;

2、說說這些事件

  onfocus

    並沒有什麽特別的,就是當焦點轉移到(點擊,tab切換) input 框上邊的時候觸發;

  onkeydown

    鍵盤按下的時候觸發,但是此時按下的值並沒有被輸入到 input ,所以,此時的 value 沒有值,或者說它的值 只能是之前的舊值

     另外,此時可以阻止按鍵的默認事件;

   onkeypress

    按鍵在按下之後,並且是按鍵松開之前觸發的;

     和 keydown 一樣不能獲取新的到 value;此時,也可以阻止按鍵的默認事件;

     但是這個事件對一下按鍵的支持不好,一些非輸入性質的按鍵(如;delete, backspare)不支持;(除enter);

  oninput

    這個事件很賊,它的觸發時機,從上面就可以看到,onpress 之後 onkeyup 之前;

     此時,已經可以拿到 value,不能拿到keycode,不可以阻止默認事件了 ;

     關鍵是這貨明明是每次輸入框的值變化時候出發的,搶了onchange 的飯碗;

     另外,這東西是新的,IE9以下不支持,需要使用 onpropertychange;

     還有這貨,僅僅在input, textarea 支持;

  onkeyup

     按鍵在松開之後觸發的;

     能獲取新的到 value,keycode;此時,不可以阻止按鍵的默認事件;

  onchange

     你敢說這是你認識的onchange嗎?反正我是不敢;在失去焦點之後觸發的,明明是 onchange 為什麽是在失去焦點後觸發的,還偏偏比 onblur 快;

     能獲取新的到 value,不能拿到 keycode;此時,不可以阻止按鍵的默認事件;

  onblur

     失去焦點時候觸發,但是還是比 onchange 慢了;

     能獲取新的到 value,不能拿到 keycode;

說說 input 輸入框的事件