input 输入框内的输入事件详细分析

1.基础:本次分析原理就是在各个浏览器下input内容变化的时候触发事件的各种不兼容性.在ie下用onpropertychange事件,在其他浏览器里用input事件.
2.用例:对每个浏览器分别测试如下的情况:
–输入英文字母时–开启输入法时–大小写不同时–输入运算符时–按下tab键时–输入法中按下空格时–按下控制键时–复制粘贴时–删除文本时–等等
3.测试开始:(只标出特殊情况,没标出的表示正常触发,每次只触发一次事件)
chrome:
+开启输入法时,可以捕捉到输入事件.
+开启输入法的时候按下空格键,触发两次事件,猜测一次是空格触发的,一次是输入法改变输入框里的文本时触发的.
+开启输入法的时候,按下空格后,立即按下大写锁定,此后所有的输入事件都会被触发两次,原因不知.
+没有开启输入法的时候,方向键不会触发事件,但是开启输入法后,方向键可以触发事件.
+剪切和粘贴都会触发事件.+tab键不处罚事件,开启输入法时,按tab键触发事件.
+按住shift和其他键(例如:数字键),每输入一个字符触发两次事件.
Firefox:
+开启输入法时,不能扑捉到事件,但是按下空格时,可以触发两次事件.
+任何时候方向键都不触发事件.
+开启输入法的时候,按下空格后,立即按下大写锁定,此后所有的输入事件都会被触发两次,原因不知.
+按下tab键的时候不触发事件.++Firefox页面刷新的时候内容会被保留在输入框里.
+按住shift和其他键(例如:数字键),每输入一个字符触发两次事件.
opera:
+正常情况下,在输入框里按下tab键会触发一次事件,但是此后只要不刷新页面,tab键都不会再触发此事件.
+开启输入法后不会触发事件,开启后,方向键和tab键都不触发事件.
+开启输入法时,按下空格只触发一次事件,不会出现触发两次事件的情况.
+粘贴的时候触发事件,剪切的时候不触发
ie:
+输入法不会触发事件,按空格也都是只触发一次,方向键任何时刻都不触发.
+刷新页面的时候内容会留在input里,而且注意,不管input是不是空的,刷新页面后自动触发一次事件.
3.总结.
就一句话,差异很大.
注意input事件可以用在chrome,Firefox,opera里,但是只能用 addEventListener绑定,不能用ontype形式,而onpropertychange可以用on形式,也可以用attachEvent绑定

其它在线演示说明：http://www.jb51.net/tools/keyboard_events.html

赞 (0)

相关推荐

  • 制作符合用户体验的漂亮的input输入框

    今天来说说鄙人对input输入框在处理上的细节处理和心得,其实制作一个符合CSS标准.FF/IE7/IE6等主流浏览器全兼容.符合用户体验的input其实并不难.先点击看看下面的效果先! 我们-www.jb51.net表单效果 *{ margin:0; padding:0; } body{ font-size:63%; color:#000; } /*input*/ .input_on{ padding:2px 8px 0pt 3px; height:18px; border:1px solid

  • jQuery 版本的文本输入框检查器Input Check

    复制代码 代码如下: /** * power by wooshoo copyright 2008-2009 * 程序名:JQuery 专用输入检查器 * 内容:专门针对input[text password hidden]以及textarea的用户输入进行检查 * 检查的范围包括:字符数.是否包含特殊字符.是否为整数.是否符合email格式.是否为电话号码. * 是否为网站地址.是否为图片地址.是否为浮点小数.是否为人民币货币.是否为日期格式 * 是否为时间格式.是否为日期时间格式.是否为密码格

  • input输入框的自动匹配(原生代码)

    今天看群里有人发起了人人网以前一些面试题,我以前也转载过一些,恰好闲着,挑选一题来做做,练个手. 本题有以下要求: 1. 使用原生代码实现,不可使用任何框架: 2. 对 input框中输入的字符进行匹配,将匹配到的内容以菜单的形式展现在 input框的下方: 3. 只针对英文字符进行匹配,并且匹配到的内容在菜单中加粗: 4. 通过键盘上的上下箭头可以对菜单进行选择,按下回车后将选中的内容写入到 input框中: 思 路 捕捉输入变化,用用户输入的值(下称输入值)去匹配列表项,这里假设列表项是查询

  • jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码

    复制代码 代码如下: <input value="请输入用户名" type="text"> <input value="请输入密码" type="text"> <input value="提交" type="submit"> <script> $(function(){ //输入框中文字颜色控制 $("input:not(:las

  • js监听输入框值的即时变化onpropertychange、oninput

    要达到的效果 很多情况下我们都会即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感.比如即时显示输入框已经被输入的字节数,或者即时读取输入的值来进行搜索引导,也就是google的关联搜索效果等. 只要我们能捕获即时事件就能做到很多事情. 需要了解的知识 首先,我们需要了解onchange和onpropertychange的不同: IE下,当一个HTML元素的属性改变的时候,都能通过 onpropertychange来即时捕获. onchange在属性值改变时还必须使得当前元

  • javascritp实现input输入框相关限制用法

    1.取消按钮按下时的虚线框  在input里添加属性值 hideFocus 或者 HideFocus=true 2.只读文本框内容  在input里添加属性值 readonly 3.防止退后清空的TEXT文档(可把style内容做做为类引用)  <INPUT style=behavior:url(#default#savehistory); type=text id=oPersistInput> 4.ENTER键可以让光标移到下一个输入框  <input onkeydown="

  • input 输入框获得/失去焦点时隐藏/显示文字(jquery版)

    input 输入框获得/失去焦点时隐藏/显示文字(jquery版)

    input 输入框获得和失去焦点时隐藏或者显示文字我们先看下效果图 输入框默认状态:  输入框获取焦点状态:  大家可以看效果图的搜索输入框,默认显示着"用户名/Email"的提示,当这个 input 输入框获得焦点时,就自动清空等待用户输入,当用户啥也没输入就离开这个 input 输入框时,输入框内又再次显示"用户名/Email"的提示.是不是很常见?很多搜索.登录.表单都会用到这个效果,但是我看了N多个网站,有90%以上是这么实现的: 复制代码 代码如下: &l

  • 基于jQuery的input输入框下拉提示层(自动邮箱后缀名)

    基于jQuery的input输入框下拉提示层(自动邮箱后缀名)

    效果图 代码部分 复制代码 代码如下: // JavaScript Document (function($){ $.fn.extend({ "changeTips":function(value){ value = $.extend({ divTip:"" },value) var $this = $(this); var indexLi = 0; //点击document隐藏下拉层 $(document).click(function(event){ if($(

  • input 输入框内的输入事件详细分析

    1.基础:本次分析原理就是在各个浏览器下input内容变化的时候触发事件的各种不兼容性.在ie下用onpropertychange事件,在其他浏览器里用input事件. 2.用例:对每个浏览器分别测试如下的情况: –输入英文字母时–开启输入法时–大小写不同时–输入运算符时–按下tab键时–输入法中按下空格时–按下控制键时–复制粘贴时–删除文本时–等等 3.测试开始:(只标出特殊情况,没标出的表示正常触发,每次只触发一次事件) chrome: +开启输入法时,可以捕捉到输入事件. +开启输入法的时

  • JS实现点击下拉菜单把选择的内容同步到input输入框内的实例

    最近博主在边学flask边写测试平台,碰到一个比较常用的场景如下图所示 这里有一个输入框组,下拉菜单里面有3个选项,还有一个输入框,代码是用 bootstrap写的,代码也给大家贴出来 <div class="input-group-btn"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"

  • 详细分析React 表单与事件

    本章节我们将讨论如何在 React 中使用表单. HTML 表单元素与 React 中的其他 DOM 元素有所不同,因为表单元素生来就保留一些内部状态. 在 HTML 当中,像 <input>, <textarea>, 和 <select> 这类表单元素会维持自身状态,并根据用户输入进行更新.但在React中,可变的状态通常保存在组件的状态属性中,并且只能用 setState() 方法进行更新. 一个简单的实例 在实例中我们设置了输入框 input 值 value =

  • vue表单验证之禁止input输入框输入空格

    vue表单验证之禁止input输入框输入空格

    测试小姐姐让输入框不允许输入空格,安排. 刚开始用的下面这个方法,因为我是电脑端f12的情况下调试移动端,所以下面这个方法可以实现禁止输入空格,于是就打包测试上线了,上线后才发现真机中不支持,应该是pc端和移动端事件不一样,所以如果你是pc端,可以使用下面这个方法. input上添加下方代码(我用的vant也一样,包括elemenui等) @keydown.native="keydown($event)" methods中写入下方代码 methods:{ // 禁止输入空格 keydo

  • Angularjs中的验证input输入框只能输入数字和小数点的写法（推荐）

    把js的验证方法改成angular可使用的方法 AngularJS文件的写法: $scope.clearNoNum = function(obj,attr){ //先把非数字的都替换掉,除了数字和. obj[attr] = obj[attr].replace(/[^\d.]/g,""); //必须保证第一个为数字而不是. obj[attr] = obj[attr].replace(/^\./g,""); //保证只有出现一个.而没有多个. obj[attr] = o

  • 详细分析Android中onTouch事件传递机制

    详细分析Android中onTouch事件传递机制

    onTach介绍 ontach是Android系统中整个事件机制的基础.Android中的其他事件,如onClick.onLongClick等都是以onTach为基础的. onTach包括从手指按下到离开手机屏幕的整个过程,在微观形式上,具体表现为action_down.action_move和action_up等过程. onTach两种主要定义形式如下: 1.在自定义控件中,常见的有重写onTouchEvent(MotionEvent ev)方法.如在开发中经常可以看到重写的onTouchEv

  • C++超详细分析讲解内联函数

    目录 宏函数(带参数的宏)的缺点 inline修饰的函数就是内联函数 内联函数的特点 宏函数和内联函数的区别 宏函数(带参数的宏)的缺点 第一个问题:宏函数看起来像一个函数调用,但是会有隐藏一些难以发现的问题. 例如: #define FUN(x, y) (x * y) printf("%d", add(3, 3 + 2)) //3 * 3 + 2 = 11 以上情况可以通过加 “()” 解决: #define FUN(x, y) (x * y) printf("%d&quo

  • 详细分析vue表单数据的绑定

    v-model的基本用法 一.本节说明 前面的章节我们学习了v-bind指定,可以通过模型数据去影响视图.我们都知道VUE是支持双向数据绑定的,那么视图是如何影响数据的呢?那就要学到我们这一节的内容v-model.v-model可以将表单输入绑定到对应的模型数据. 二. 怎么做 我们通过v-model实现一个简单的需求 通过表单input绑定模型数据message,表单数据变化data.message也发生变化 然后通过Mustache表达式,将变化之后的message数据显示到视图页面上 三.

  • vue原生input输入框原理剖析

    目录 正文 v-model 正文 首先我们来看一段代码: <input value="value"> 这里是一个原生的input输入框,每一个原生的输入框都会有一个value的属性来用于存储用于输入的最新的数据. 如果我们想要获取到这个值我们可以通过input.target.value或者通过$event.target.value来获取这个存储的值. 只要用户输入了数据,那么此时input标签就会将输入的数据放到这个value中(新数据会覆盖旧数据,所以我们获取到的都是最新

  • Vue高级特性概念原理详细分析

    目录 1. 自定义v-model 2. $nextTick 3. slot 插槽 4. Vue 动态组件 5. Vue 异步组件 6. 使用 keep-alive 缓存组件 7. mixin 混入 1. 自定义v-model Vue中的自定义v-model指的是在自定义组件中使用v-model语法糖来实现双向绑定.在Vue中,通过v-model指令可以将表单元素的值与组件实例的数据进行双向绑定.但是对于自定义组件,如果要实现v-model的双向绑定,就需要自定义v-model的实现方式. 自定义

随机推荐