深入理解DOM事件類型系列第五篇——文本事件

前面的話

　　如果DOM結構發生變化，觸發的是變動事件；如果文本框中的文本發生變化，觸發的是文本事件

　　HTML5為input控件新增了很多type屬性，大大增加了input控件的應用場景。其中一個是type="range"的input控件，可以通過拖動游標改變value值，但並不是所有瀏覽器都可以實時顯示，除了IE10+瀏覽器

<input type="range" min="0" max="10" step="0.5" value="6" />

　　那么哪些文本事件可以實時監測游標變化呢？本文將以此為引子詳細介紹文本事件

 

change

　　說起文本變化，最先想到的可能就是change事件

　　對於<input>和<textarea>元素，在它們失去焦點且value值改變時觸發；對於<select>元素，在其選項改變時觸發

<input id="test" value="請改變內容並移除焦點">
<script>
test.onchange = function(){
    test.style.backgroundColor = 'pink';
}
</script>

　　只有在IE瀏覽器下，change事件對游標實時變化起作用；其他瀏覽器下，必須松開鼠標后，change事件才起作用

<input id="test" type="range" min="0" max="10" value="6" />
<span id="result"></span>
<script>
test.onchange = function(){
    result.innerHTML = test.value;
}
</script>

textInput

　　DOM3級事件引人了一個新事件——textInput，用來替代keypress事件。當用戶在可編輯區域中輸入字符時，就會觸發這個事件

　　[注意]該事件只支持DOM2級事件處理程序，且只有chrome和safari瀏覽器支持

　　textInput與keypress事件有兩點不同

　　【1】textInput事件只會在用戶按下能夠輸入實際字符的鍵時才會被觸發，而keypress事件則在按下那些能夠影響文本顯示的鍵時也會觸發(如回車鍵)

　　【2】任何可以獲得焦點的元素都可以觸發keypress事件，但只有可編輯區域才能觸發textInput事件

<button id="test">按鈕</button>
<script>
//控制台只輸出1，不輸出2
test.onkeypress = function(){console.log(1);}
test.addEventListener('textInput',function(){console.log(2)})
</script>

<input id="test">
<script>
//控制台以1-2的順序輸出
test.onkeypress = function(){console.log(1);}
test.addEventListener('textInput',function(){console.log(2)})
</script>

　　由於textInput事件主要考慮的是字符，因此它的event對象中還包含一個dada屬性，這個屬性的值就是用戶輸入的字符

　　比如用戶在小寫模式下，按下了S鍵，data值就是's'，而如果在大寫模式下按下該鍵，data的值就是'S'

<input id="test"><span id="result"></span>
<script>
test.addEventListener('textInput',function(e){
    e = e || event;
    result.innerHTML = e.data;
})
</script>

　　由於<input type="range">的游標並不是可編輯區域，所以，textInput事件對游標變化無作用

 

input

　　文本事件中，除了textInput事件，還有一個input事件

　　HTML5新增了一個input事件，只要輸入框內容發生變化就會立即觸發，但通過javascript改變value時不會觸發

　　所以這事件與change事件的區別就是不需要移除焦點就可以觸發

　　[注意]該事件IE8-瀏覽器不支持

<input id="test">
<script>
test.oninput = function(){
    this.style.background = 'pink';
}
</script>

　　該事件可以在chrome/safari/firefox/IE9瀏覽器中，實時監測游標的變化

<input type="range" id="input"><span id="result"></span>
<script>
    input.oninput = function(){
        result.innerHTML = this.value;
    }
</script>

propertychange

　　IE有一個專有事件叫propertychange事件，該事件會在設置disable="true"時失效。propertychange觸發函數只有一個默認參數，是所有可以觸發屬性的集合。該事件是在觸發對象改變任何屬性時都會觸發

　　[注意]IE11瀏覽器不支持

<input type="range" id="input"><span id="data"></span>
<script>
    input.onpropertychange = function(){
        data.innerHTML = this.value;
    }
</script>

兼容

　　如果要使游標變化實現全瀏覽器兼容，使用input和change事件可以實現

<input type="range" id="test"><span id="result"></span>
<script>
//通過userAgent檢測IE瀏覽器
function isIE(){
    var ua = navigator.userAgent;
    //檢測Trident引擎，IE8+
    if(/Trident/.test(ua)){
        //IE11+
        if(/rv:(\d+)/.test(ua)){
            return RegExp["$1"];
        }    
        //IE8-IE10    
        if(/MSIE (\d+)/.test(ua)){
            return RegExp["$1"];
        }        
    }
    //檢測IE標識，IE7-
    if(/MSIE (\d+)/.test(ua)){
        return RegExp["$1"];
    }    
}
//IE瀏覽器
if(isIE()){
    test.onchange = function(){
        result.innerHTML = this.value;
    }
//其他瀏覽器
}else{
    test.oninput = function(){
        result.innerHTML = this.value;
    }
}
</script>

 

最后

　　如果只考慮游標，而不考慮IE9-瀏覽器退化成文本框的情況，使用mousemove事件就可以實現實時監控數據變化的需求