JS的textinput事件

时间 2019-12-05

原文原文链接

“DOM3级事件”规范中引入了一个新事件，名叫textInput。根据规范，当用户在可编辑区域中输入字符时，就会触发这个事件。这个用于替代keypress的textInput事件的行为稍有不一样。

区别之一就是任何能够得到焦点的元素均可以触发kepress事件，但只有可编辑区域才能触发textInput事件。

区别之二extInput事件只会在用户按下可以输入实际字符的键时才会被触发，而keypress事件则在按下那些可以影响文本显示的键时也会触发（例如退格键）。

因为textInput事件主要考虑是字符，所以它的event对象中还包含一个data属性，这个属性的值就是用户输入的字符（而非字符编码）。换句话说，用户在没有按上档键的状况下按下了S键，data的属性就是“s”，而若是在按住上档键时按下该键，data的值就是“S”。

如下是一个使用textInput事件的例子：

var EventUtil = {
        getEvent: function (event) {
        return event ? event : window.event;
        },web

        addHandler: function (element, type, handler) {
        if (element.addEventListener) {
        element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
        element.attachEvent("on" + type, handler);浏览器

} else {编码

        element["on" + type] = handler;
        }
        }
        };
        var textbox = document.getElementById("myText");spa

EventUtil.addHandler(textbox, "textInput", function (event) {orm

event = EventUtil.getEvent(event);
alert(event.data);对象

});事件

复制代码ci

在这个例子中，插入到文本框中的字符会经过一个警告框显示出来。目前只有Safari3和Chrome浏览器支持textInput事件。所以，在跨浏览器开发中，可能还没法使用这个事件