【js学习笔记-097】-------文本事件

【js学习笔记-------文本事件】

keydown事件和keyup事件是低级事件，下一节介绍。keypress事件是较高级的事件，它表示产生一个可打印字符。3级DOM事件规范草案定义一个更通用的textinput事件，不管来源（键盘，粘贴，拖放形成的数据传输，亚洲语言输入法，声音或手写识别系统），无论何时用户输入文本时都会触发它。该事件尚未支持，但webkit浏览器支持一个非常类似的”textInput”事件。它们都传递一个简单的事件对象，该事件对象有一个用于保存输入文本的 data属性。对于键盘，通常只保存单个字符，但其它输入源通常可能包含多个字符。

keypress事件输入的单个字符，对象以数字Unicode编码的形式指定字符，所以必须用String.fromCharCode()把它转换成字符串。大多数浏览使用keyCode属性指定输入字符串。但历史原因，firefox使用charCode属性。大多浏览器只在当产生可打印字符时触发keypress事件。但是firefox在产生非打印字符时，也触发keypress事件。为了检测这种情况，可以查找有charCode属性但值为0的事件对象。

 

可以通过取消 textinput/textInput和keypress事件来阻止字符输入，这意味着可以使用这些事件来过滤输入。例如，你可能想阻止用户在只接受数字数据的域中输入字母。如下例：input type=text元素只接受data-allowed-chars中定义的字符。

例：<input id=”zip” type=”text”data-allowed-chars = “0123456789” data-messageid=”zipwarn”>

<span id=”zipwarn”style=”color:red;visibility:hidden”>只支持数字</span>

 

whenReady(function(){

     var inputelts =document.getElementsbyTagName(“input”);

     for(var i=0;i<inputelts.length;i++){

          var elt = inputelts[i];

           //路过不是文本域或没有dta-allowed-chars属性的元素

          if(elt.type!=”text” ||!elt.getAttribute(“data-allowed-chars”))continue;

          if(elt.addEventListener){

   elt.addEventListener(“keypress”,filter,false);

   elt.addEventListener(“textInput”,filter,false);

   elt.addEventListener(“textinput”,filter,false);

}else{

   elt.attachEvent(“onkeypress”,filter)

}

}

 

//事件处理程序

function filter(event){

   var e= event || window.event;

   var target = e.target || e.srcElement; //

   var text = null;

    if(e.type==”textinput” || e.type==”textInput”){

   text = e.data;

}else{

   var code = e.charCode || e.keyCode;

   if(code <32 || e.charCode==0 || e.ctrlKey || e.altKey){

        return ;

}

var text = String.fromCharCode(code);

}

var allowed = target.getAttribute(“data-allowed-chars”);

var messageid = target.getAttribute(“data-messageid”);

if(messageid) var messageElement =document.getElementById(“messageid”);

//遍历文本中输入的字符

for(var i=0;i<text.length;i++){

   var c = text.charAt(i);

   if(allowed.indexOf(c)==-1){

       if(messageElement)messageElement.style.visibility = “visible”;

       if(e.preventDefault)e.preventDefault();

       if(e.returnValue) e.returnValue = false;

       return false;

}

}

if(messageElement)messageElement.style.visibility= “hidden”;

}

 

});

 

keypress和textinput事件是是在新输入的文本真正插入到聚集的文档元素前触发，这就是这些事件处理程序能够取消事件和阻止文本插入的原因。浏览器也实现了在文本插入到元素后才触发的input事件类型input。虽然这些事件不能取消，不能指定其事件对象中的最新文本，但它们能以某种形式提供元素文本内容发生改变的通知。如下：

如果想确保输入框中输入的任何文本都是大写，那么就可以像如下这样使用input事件：

姓氏：<input type=”text” οninput=”this.value=this.value.toUpperCase()”>

HTML5标准化了input事件，除IE外的所有浏览器都支持它。在IE中，可以使用不标准的propertychange事件检测文本输入元素的value属性改变来实现相似的效果。

例：跨平台的方式强制氖输入都大写。

functionforceToUpperCase(element){

     if(typeof element ===”string”)element = document.getElementById(element);

     element.oninput = upcase;

     elsemnt.onpropertychange =upcaseOnPropertyChange;

     function upcase(event){this.value =this.value.toUpperCase();}

     function upcaseOnPropertyChange(evnet){

               var e= event || window.event;

               if(e.propertyName ===”value”){

                  //移除onpropertychange处理程序，避免循环用

                   this.onpropertychange =null;

                   //把值都变成大写

                   this.value =this.value.toUpperCase();

                   //然后恢复原来的propertychange处理程序

                   this.onpropertychange = upcaseOnPropertyChange;

}

}

}