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

Posted 2020-08-09 小火柴的蓝色理想

[1]change [2]textInput [3]input [4]propertychange [5]兼容

前面的话

　　如果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事件就可以实现实时监控数据变化的需求