javaScript事件(七)事件类型之键盘与文本事件

键盘事件如下:

  • keydown:当用户按下键盘上的任意键时触发,而且如果按住不放的话,会重复触发此事件。
  • keypress:当用户按下键盘上的字符键时触发,而且如果按住不放的话,会重复触发此事件。
  • keyup:当用户释放键盘上的键时触发。

只有一个文本事件:textInput。textInput是对keypress的补充,用意是在将文本显示给用户之前更容易拦截文本。在文本插入文本框之前会触发textInput事件。

解释:

当用户按下一个键盘上的字符键时,首先会触发keydown事件,然后紧跟着是keypress事件,最后会触发keyup事件。

keydown和kepress都是在文本框发生变化之前触发的,keyup事件则是在文本框已经发生变化之后触发的。

如果用户按下一个字符键不放,就会重复触发keydown和keypress事件,直到用户松开该键为止。

如果用户按下的是一个非字符键,那么首先会触发keydown事件,然后就是keyup事件。如果按住这个非字符键不放,那么就会一直重复触发keydown事件,直到用户松开这个键,此时会触发keyup事件。

1、键码

keydown和keyup事件发生时,evnet对象的keyCode属性中会包含一个代码,与键盘上一个特定的键对应。

var textbox=document.getElementById("myText");
EventUtil.addHandler(textbox,"keyup",function(event){
event=EventUtil.getEvent(event);
console.log(event.keyCode);
});

兼容性:在Firefox和Opera中,按分号键时keyCode值为59,也就是ASCII中分号的编码;但IE和Safari返回186,即键盘中按键的键码。

2、字符编码

IE9,Firefox,Chrome和Safari的event对象支持charCode 属性,charCode只有发生keypress事件时才包含值,该值是按下那个键所代表字符的ASCII编码。

兼容性:

IE8及之前版本中Opera是在keyCode中保存字符的ASCII编码。

检查charCode属性是否可用,不可用则使用keyCode。

getCharCode:function(event){
if(typeof event.charCode=="number"){//在不支持的浏览器中值是undefined
return event.charCode;
}else{
return event.keyCode;
}
}

在取得了字符编码之后,就可以使用String.fromCharCode()将其转换成实际的字符。

3、DOM3级变化

DOM3中键盘事件不再包含charCode,而是包含2个新属性:key和char。

key是为了取代keyCode新增的,它的值是一个字符串。按下字符键(比如"M"),key的值就是相应的文本字符"M";按下非字符键时,key的值就是相应的键名(比如"Shift"或“Down”)。

char属性在按下字符键时行为与key相同,但在按下非字符键时值为null。

存在兼容性,不推荐用。

4、textInput事件(DOM3事件)

用户在可编辑区域中输入字符时,就会触发这个事件。

textInput用来代替keypress,二者区别:

  • 任何可以获得焦点的元素都可以触发keypress事件,但只有可编辑区域才能触发textInput事件。
  • textInput事件只会在用户按下能够输入实际字符的键时才会触发,而keypress事件则在按下那些能够影响文本显示的键时也会触发(比如退格键)。

data属性

textInput事件主要考虑的是字符,因此它的event对象中还包含一个data属性,data值为用户输入的字符。

  • 用户按下S键,data值就是“s”
  • 用户按下上档键时按下S键,data值就是"S"
EventUtil.addHandler(textbox,"textInput",function(event){
event=EventUtil.getEvent(event);
console.log(event.data);
});

inputMethod属性

另外,event对象上还有一个属性,叫inputMethod,表示文本输入到文本框中的方式。使用这个属性可以确定文本是如何输入到控件中,从而验证其有效性。

  • 0,表示浏览器不确定是怎么输入的
  • 1,表示是使用键盘输入的
  • 2,表示文本是粘贴进来的
  • 3,表示文本是拖放进来的
  • 4,表示文本是使用IME输入的
  • 5,表示文本是通过在表单中选择某一项输入的
  • 6,表示文本是通过手写输入的(比如使用手写笔)
  • 7,表示文本是通过语音输入的
  • 8,表示文本是通过集中方法组合输入的
  • 9,表示文本是通过脚本输入的

兼容性:支持textInput属性的浏览器有IE9+,Safari和Chrome,只有IE支持inputMethod属性。

扩展阅读:

javaScript事件(一)事件流

javaScript事件(二)事件处理程序

javaScript事件(三)事件对象

javaScript事件(四)event的公共成员(属性和方法)

javaScript事件(五)事件类型之鼠标事件

本文作者starof,因知识本身在变化,作者也在不断学习成长,文章内容也不定时更新,为避免误导读者,方便追根溯源,请诸位转载注明出处:http://www.cnblogs.com/starof/p/6558581.html有问题欢迎与我讨论,共同进步。

上一篇:转 linux下xargs命令用法详解


下一篇:[转]Delphi 控件属性和事件