当我们在搜索时,会用到这几个事件

  • onkeydown 是指鼠标按下的那一刻,此时用户不知道按了什么,文本框也不会显示,首先触发的事件
  • onkeypress 是指鼠标按下然后松开的瞬间,此时仍然获取不到文本框的内容
  • onkeyup 是指鼠标松开后的那一刻,怎么和onkeypress 区别呢,假如你按住一个键,不松开,那么按住的时候会执行onkeydown和onkeypress,不会执行onkeyup,直到你松开键盘的那一刻执行。

也就是说,按下一个字母时,执行的顺序:onkeydown onkeypress onkeyup 

按住某个字母不放时,执行的顺序:(onkeydown onkeypress ···· onkeydown onkeypress)onkeyup

然后当我们输入中文时,却不一样:只会发生onkeydown 和 onkeyup

还有部分功能键如:F1、F3键等只会发生onkeydown ;Tab键,backspace,delete等键只会发生 onkeydown 和 onkeyup

总的来说,如果要检测文本框输入内容用onkeyup,这里又遇到一个问题,当我们输入中文时,用鼠标自己点击文字输入(或者手机点击输入提示栏的文字),此事件检测不到,怎么办呢,可以这样:

if (navigator.userAgent.indexOf("MSIE") != -1) {
bindName = "propertychange"; //判断是否为IE内核 IE内核的事件名称要改为propertychange
}
$('#txt').bind(bindName, function() {
word(4);
});

-----------------------------------测试代码-----------------------------------

<!doctype html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<title>Document</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
function word(str) {
console.log(str + "---" + document.getElementById('txt').value);
}
var bindName = "input";
$(function() {
if (navigator.userAgent.indexOf("MSIE") != -1) {
bindName = "propertychange"; //判断是否为IE内核 IE内核的事件名称要改为propertychange
}
$('#txt').bind(bindName, function() {
word(4);
});
})
</script>
</head>

<body>
<input type="text" id="txt" onerror="errortip()" onkeydown="word(1)" onkeypress="word(2)" onkeyup="word(3)" />
</body>

</html>

05-02 01:36