键盘事件keydown,keypress,keyup的详解

时间:6年前   阅读:4879

keypress定义和用法

与 keypress 事件相关的事件顺序:

1、keydown - 键按下的过程

2、keypress - 键被按下

3、keyup - 键被松开

keypress() 方法触发 keypress 事件,或规定当发生 keypress 事件时运行的函数。

keypress 事件与 keydown 事件类似。当按钮被按下时发生该事件。

然而,keypress 事件不会触发所有的键(比如 ALT、CTRL、SHIFT、ESC)。请使用 keydown() 方法来检查这些键。

虽然从字面理解,keydown是按下一个键的意思, 但实际上二者的根本区别是,系统由keydown返回键盘的代码,然后由TranslateMessage函数翻译成成字符,由keypress 返回字符值。因此在keydown中返回的是键盘的代码,而keypress 返回的是ASCII字符。如果只想读取字符,用keypress,如果想读各键的状态,用keydown。

说keydown是按下, keypress 是按下并松开,是不对的。如果一直按着键, 这时不断地产生keydown和keypress。

按下键盘时会触发键盘事件,顺序为keydown -> keypress ->keyup。

1、keydown、keypress事件触发在文字还没敲进文本框,这时如果在keydown、keypress事件中输出文本框中的文本,得到的是触发键盘事件前的文本,而keyup事件触发时整个键盘事件的操作已经完成,获得的是触发键盘事件后的文本

<input id="input" value="default" type="text" />

<script>

var input = document.getElementById('input');

input.onkeydown = function() {

    console.log('onkeydown ' + this.value);

}

input.onkeypress = function() {

    console.log('onkeypress ' + this.value);

}

input.onkeyup = function() {

    console.log('onkeyup ' + this.value);

}

</script>

在文本框中敲入数字1,输出结果为:

onkeydown default

onkeypress default

onkeyup default1

2、keypress事件与keydown和keyup的主要区别

1)对中文输入法支持不好,无法响应中文输入

2)无法响应系统功能键(如delete,backspace)

3)由于前面两个限制,keyCode与keydown和keyup不是很一直

3、在keyup事件中无法阻止浏览器默认事件,因为在keypress时,浏览器默认行为已经完成,即将文字输入文本框(尽管这时还没显示),这个时候不管是preventDefault还是return false,都不能阻止在文本框中输入文字的行为,如要阻止在文本框中输入文字,必须在keydown或keypress时阻止

<input id="input" value="default" type="text" />

<script>

var input = document.getElementById('input');

input.onkeydown = function() {

    //return false;

    console.log('onkeydown ' + this.value);

}

input.onkeypress = function() {

    //return false;

    console.log('onkeypress ' + this.value);

}

input.onkeyup = function() {

    return false;

    console.log('onkeyup ' + this.value);

}

</script>

结果为keydown、keypress事件中return false文本框无法输入文字,在keyup事件中return false文本框可以输入文字

4、textInput事件

文本框的键盘响应事件把textInpput也加进来,触发的顺序为:keydown -> keypress ->textInput -> keyup

textInput事件是DOM3后支持的,主要用来替换keypress,与keypress的主要差别在于添加了对中文输入法的支持,还有一点就是textInput只在可编辑文本区才能触发(如input、textarea),而keypress是任何能获得焦点的控件的能触发(如button),但是textInput事件的支持还不是很好,目前只有safari、chrome支持。

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

上一篇:powershell命令大全

下一篇:50ETF期权合约期限是多长时间?

网友评论

请先 登录 再评论,若不是会员请先 注册