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

  • 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>

文本框按键事件onkeydown、onkeypress、onkeyup区别的更多相关文章

  1. 转:onkeypress、onkeydown、onkeyup 区别

    在使用JavaScript做WEB键盘事件侦听捕获时,主要采用onkeypress.onkeydown.onkeyup三个事件进行出来.该三个事件的执行顺序如下:onkeydown -> onk ...

  2. JavaScript文本框焦点事件

    效果图如下: <!-- 当文本框获得焦点时候,如果文本框内容是 请输入搜索关键字 清空文本框,输入内容变黑色 --> <!-- 当文本框失去焦点时候,如果文本框无内容,则添加灰色的 ...

  3. jquery 监控文本框键盘事件(回车事件),附常用keycode值。

    $(function(){ $(".search").keydown(function(event) { ) { //执行操作 } }) ); 完整的 key press 过程分为 ...

  4. GridView里的文本框改变事件

    <asp:TemplateField HeaderText="实收数量"> <ItemTemplate> <asp:TextBox ID=" ...

  5. ASP.net绑定文本框Enter事件到按钮 ASP.NET执行后台执行JS方法

    txtAccountBarcode.Attributes.Add("onkeydown", "if(event.which || event.keyCode){if (( ...

  6. jQuery中的bind绑定事件与文本框改变事件的临时解决方法

    暂时没有想到什么好的解决办法,我现在加了个浏览器判断非ie的话就注册blur事件,这样有个问题就是blur实在别的控件活动焦点的时候,txtStation控件注册的方法是为了填充它紧挨着的一个下拉列表 ...

  7. WebForm - 文本框回车事件

    document.getElementById("Pwd").onkeyup = function (e) { ) { fun_Login(); } };

  8. js监听文本框变化事件

    用js有两种写法: 法一: <!DOCTYPE HTMl> <html> <head> <title> new document </title& ...

  9. EXTJS 4.2 资料 控件之textfield文本框加事件的用法

    { xtype: "textfield", width: 100, id: "txtGroupName", name: "txtGroupName&q ...

随机推荐

  1. this关键字之一个有趣的用法

    this关键字 1.首先一个用处就是代表当前类的对象. 2.当我们对构造函数进行重载的时候代码如下: public class Class1 { public string Name { get; s ...

  2. 读取oracle页面或者进程卡住不动(死锁)

    oracle最坑爹的地方:你insert   update  delete之后  或者kill死锁的时候记得一定要提交事务不然就是死锁卡在那里了 记住  kill死锁也是要提交事务的 select * ...

  3. 【nodejs学习】0.nodejs学习第一天

    1.模块 大一点的程序都需要模块化,nodejs也不例外,代码放到不同的文件中,每一个文件就可以是一个模块,文件路径名就是一个模块名.每个模块中包含三个预先定义的变量: 1.require:用于在当前 ...

  4. poj1611 简单并查集

    The Suspects Time Limit: 1000MS   Memory Limit: 20000K Total Submissions: 32781   Accepted: 15902 De ...

  5. Heroku使用

    先要生成一个公钥,使用命令:$ ssh-keygen -t rsaGenerating public/private rsa key pair.Enter file in which to save ...

  6. 在sublime text 3中安装中文支持

    1.安装package control 使用control+~打开终端,然后输入以下内容并确定: import  urllib.request,os;pf='Package Control.subli ...

  7. jquery实现弹出即消失的提示层

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. hadoop集群的故障概率估算

    hadoop集群的机器数业界(国内)最大的在5000左右,是什么限制了集群的规模呢?有好几个原因. 1. namenode的内存大小限制 2. 机器故障概率随着机器数目增大而增大,通常一份数据存储在h ...

  9. 关于IoCallDriver

    通常我们所知IoCallDriver是把irp传递给下一层设备,传递到底是什么意思呢?IoCallDriver中实际调用了IopfCallDriver,其代码如下:NTSTATUSFORCEINLIN ...

  10. Java Thread Status(转)

    public static enum Thread.State  extends Enum<Thread.State>线程状态.线程可以处于下列状态之一: 1.NEW 至今尚未启动的线程的 ...