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

  • 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. wed网页开发面试笔试必备小知识

    HTML中行内元素与块级元素的区别: 在标准文档流里面,块级元素具有以下特点: ①总是在新行上开始,占据一整行: ②高度,行高以及外边距和内边距都可控制: ③宽带始终是与浏览器宽度一样,与内容无关: ...

  2. 关于html控件和服务器控件摁回车后提交按钮的问题

    今天做项目用到,项目是一个洗车系统,刷卡后在焦点出自动触发回车键事件,如,一个文本框,把焦点放入,刷一下卡,文本框自动获取卡号,同时触发回车事件,(就像银行办卡一样),发现刷卡后页面刷新后并没有执行按 ...

  3. IE6不能用class命名！IE6不能用class命名！IE6不能用class命名！ 重要的事情说3遍

    IE6不能用class命名!IE6不能用class命名!IE6不能用class命名!  重要的事情说3遍

  4. php模块memcache和memcached区别分析

    zm总结:尽量使用memcached就好了 1.目前大多数php环境里使用的都是不带d的memcache版本,这个版本出的比较早,是一个原生版本,完全在php框架内开发的.与之对应的带d的memcac ...

  5. Swift中对计算属性的理解和对之前的补充

    这个功能的重点作用应该是在计算上. 对于一般的属性,要么直接存一个,要么直接读一个,计算属性则可以根据所设置内容,进行一些修改或计算之类的, 比如: import UIKit class sample ...

  6. The Suspects

    算法:并查集 严重急性呼吸系统综合症( SARS), 一种原因不明的非典型性肺炎,从2003年3月中旬开始被认为是全球威胁.为了减少传播给别人的机会, 最好的策略是隔离可能的患者. 在Not-Spre ...

  7. Guava API学习之Ordering犀利的比较器 编辑

    Ordering是Guava类库提供的一个犀利强大的比较器工具,Guava的Ordering和JDK Comparator相比功能更强.它非常容易扩展,可以轻松构造复杂的comparator,然后用在 ...

  8. jquery的鼠标移入移出事件hover、mouseenter、mouseleave、mouseover、mouseout

    hover:鼠标进入元素的子元素时不会触发‘鼠标移开’的事件: mouseenter.mouseleave:效果与hover相同: mouseover: 鼠标进入元素和进入它的子元素时都会触发‘mou ...

  9. WPF、WinForm(C#)多线程编程并更新界面（UI）(转载积累)

    using System;using System.Collections.Generic;using System.ComponentModel;using System.Drawing;using ...

  10. brew 更换国内源(镜像)

    cd /usr/local git remote set-url origin git://mirrors.tuna.tsinghua.edu.cn/homebrew.git brew update ...