美文网首页JS让前端飞
JS—键盘与文本事件

JS—键盘与文本事件

作者: Miss____Du | 来源:发表于2014-12-27 20:00 被阅读559次

对键盘事件的支持主要遵循DOM0级,虽然DOM3级为键盘事件制定了规范,但是并不是所有浏览器的支持的。为了提高网页的兼容性,还是尽量避免使用兼容性不高的事件。


三个键盘事件一个文本事件,这四个事件均是与键盘有关系。

  • 键盘事件

  • keydown:当用户按下键盘任意键时触发

  • keypress:当用户按下键盘字符键(按下后,文本框可以显示的)时触发

  • keyup:当用户释放键盘上的键时触发

  • 操作
    1、用户按下键盘上的字符键时,首先会触发keydown事件,然后紧接着为keypress事件,最后触发keyup事件。其中前两个是文本框发生变化之前触发的,后一个是在文本框发生变化后触发的。
    2、当用户按下的是一个非字符键时,首先会触发keydown事件,然后就触发keyup事件。
    注意
    使用这些事件时,也有需要注意的地方。
    1、英文输入法下,所有浏览器都支持这三个事件。
    keydown/keyup组合不区分英文字母大小写,检测他们的keycode属性时,都为大写码。
    keypress区分大小写。
    2、中文输入法下,个浏览器针对字符键的表现不一致。
    IE、chrome、Safari
    凡是由于输入法区别,而造成键盘上的按键表现不一致的键,在keydown事件的keycode值为229,(什么意思呢?你看,12345这些按键,不论是什么输入法下,显示都一样,所以支持keydown、keypress、keyup,但是像字母键,逗号,,分号;;这些输入法不一样表现就不一样的,那么他们不支持keypress,keydown值为229,keyup值为英文输入法下的keycode值)。
    FF:对于keydown与keypress的理解同上,只不过,这个keydown值为0,对于keyup是在,输入完成后,才触发的。什么意思呢,就是我们利用输入法输入中文时,不是先大一些拼音然后按住空格或者回车么,up事件就是在这个时候,当我们按住回车或者空格时才触发.
    opera:我测试了最新版本的欧朋,结果与chrome一致。

  • 键盘事件的属性

  • keycode该属性上一部分一直说,他包含一个代码对应ASCII码。
    【差别】浏览器之间的差别,除了上面提到的部分,还有需要注意的地方。
    火狐浏览器:字符键的keypress事件的keycode值,不论中英输入法,均为0值。
    ;这个字符,在keydown/up事件中,keycode值为186(英文输入法),但是在keypress事件中,值为59

  • charcode
    该属性是在发生keypress事件时发生,发生该事件时,keycode可能为0,可能为ascii码,而如果浏览器支持这个属性,那么他的值为ascii码。
    getcharcode:function(event){
    if(typeof event.charCode=="number"){
    return event.charCode;
    }else{
    return event.keyCode;
    }
    }
    上述代码是避免浏览器不支持charcode属性。

  • dom3级还有一些变化,但是浏览器支持程度太差,没有多少人愿意用,我就不写笔记啦

  • textInput
    当用户输入可以显示的字符时,触发这个事件。区别keypress事件,当用户按下退格键时,并不会触发textInput事件。
    该事件对象还有一个属性叫data。这个属性的值就是输入的字符本身的值。
    先触发该事件,才能显示该字符。


对要输入的字符进行提前验证,是该类事件的一个重要应用。日后会补上一篇的。

相关文章

  • JS—键盘与文本事件

    对键盘事件的支持主要遵循DOM0级,虽然DOM3级为键盘事件制定了规范,但是并不是所有浏览器的支持的。为了提高网页...

  • bug总结

    延时刷新页面 layer 弹窗 jquery keyup (键盘事件):键盘输完值立刻在文本框中计算值 js 代码...

  • 键盘与文本事件

    1、keydown 当用户按下键盘上的任意键时触发,而且如果按住不放的话,会重复触发此事件。 是在文本框发生变化之...

  • Web-API-04

    常用的键盘事件 键盘事件 键盘事件对象 案例:模拟京东快递单号查询 要求:当我们在文本框中输入内容时,文本框上面自...

  • js操作页面三步骤

    js操作页面三步骤 js事件 鼠标事件 文档事件 键盘事件 表单事件 事件对象 js操作内容 js操作样式 页面转...

  • 事件

    1、鼠标的移入移除js部分 2、鼠标事件js部分 3、事件对象js部分 4、键盘事件js部分 5、输入框事件js部...

  • Input联动-根据条件自动进入上一个/下一个输入框

    Html代码,定义三个input输入框,文本长度最大为3 js代码,处理onkeydown事件(当松开键盘按键的时...

  • JS事件—键盘事件

    键盘事件的种类 键盘事件由用户击打键盘触发,主要有keydown、keypress、keyup三个事件,它们都继承...

  • JS事件相关基础

    js事件: 键盘事件: JS中的事件冒泡和事件捕获: 1、事件冒泡。如下代码: 点击button事件,连同父元素绑...

  • js事件 事件冒泡

    js事件的分类 事件的类型:有鼠标事件,键盘事件,HTML事件,变化事件 注意:js中的事件前面要加on(如:on...

网友评论

  • a95d0cbc5c77:你是特意买本书看的么 推荐一本呗?
    Miss____Du:@仅斩一刀 大红书
  • Miss____Du:@原谅我脸大爱自由 先学习语言,从c到c++
    c#,这都是大学的课程,期间也得学习数据结构,数据库。这些都是工具,学习时,很枯燥,因为见不到应用的地方。但是只要坚持下来,就算学的不是很精,基本明白每门课程讲什么就行。
    真正自发学习,还是做wpf还有asp.net项目时,为了设计出美丽的界面,必须自学前端语言,为了与数据库有更多的交互,必须多学数据库,还有c#中,与数据库交互的代码结构。当然,如果想让程序封装性更好,运行更有效率,还需要深度学习数据结构与面相对象。后者都是如果你想优化你自己的作品,你必须要学习的,但是如果你对你设计的作品,没有啥要求,得过且过,就谈不上这些自发学习啦
  • 舍璃: @Miss____Du 那你最开始从哪方面开始的呢
  • Miss____Du:@原谅我脸大爱自由 这是一个过程,当我对互联网感兴趣,对互联网依托计算机技术而实现的画面感兴趣时,我想我也能参与之中,我就对他讨厌不起来了。
  • 舍璃:写代码的女汉子,不容易,表示我曾是一枚被代码折磨得想转专业的娃。真不晓得怎么让代码对我有感觉

本文标题:JS—键盘与文本事件

本文链接:https://www.haomeiwen.com/subject/cngatttx.html