javascript开发中使用onpropertychange,oninput事件解决onchange事件的不足

onchange在用于文本框输入框时,有一个明显的不足. 事件不会随着文字的输入而触发,而是等到文本框失去焦点(onblur)时才会触发. 也就是没有即时性!

在IE下,可以用onpropertychange来代替onchange事件,当文本框有任何变化时,能立即触发此事件.

这样一来问题就解决了.

那其他浏览器呢,onpropertychange可是IE的专利. 接下来就是oninput事件了.

但是oninput有个诡异,必须用addEventListener的方式来绑定事件.否则无效.

好了, 以下是演示例子, 主流浏览器都没问题:

on用onpropertychange,oninput事件解决onchange事件的不足 by koyoz.com

*{font-size:14px;font-family:'Comic Sans MS', Verdana}
body {margin-left:20px}

使用onchange事件:

使用onpropertychange/oninput事件:

结果:

var $ = function(o) {
return document.getElementById(o)
};
$('txt1').onchange = function() {
$('txt').value = this.value;
}
$('txt2').onpropertychange = function() {
$('txt').value = this.value;
}
if (window.addEventListener) {
$('txt2').addEventListener('input', function() {$('txt').value = this.value}, false);
}

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • javascript移动设备Web开发中对touch事件的封装实例

    在触屏设备上,一些比较基础的手势都需要通过对 touch 事件进行二次封装才能实现. zepto 是移动端上使用率比较高的一个类库,但是其 touch 模块模拟出来的一些事件存在一些兼容性问题,如 tap 事件在某些安卓设备上存在事件穿透的 bug,其他类型的事件也或多或少的存在一些兼容性问题. 于是乎,干脆自己动手对这些常用的手势事件进行了封装,由于没有太多真实的设备来进行测试,可能存在一些兼容性问题,下面的代码也只是在 iOS 7.Andorid 4 上的一些比较常见的浏览器中测试通过. t

  • 关于编写性能高效的javascript事件的技术

    关于编写性能高效的javascript事件的技术

    如何能做出高效的web前端程序是我每次做前端开发都会不自觉去考虑的问题.几年前雅虎里牛逼的前端工程师们出了一本关于提升web前端性能的书籍,轰动了整个web开发技术界,让神秘的web前端优化问题成为了大街的白菜,web前端优化变成了菜鸟和大牛都能回答的简单问题,当整个业界都知道了惊天秘密的答案,那么现有的优化技术已经不能对你开发的网站产生的质的飞越,为了让我们开发的网站性能比别人的网站更加优秀,我们需要更加深入的独立思考,储备更加优秀的技能. Javascript里的事件系统是我想到的第一个突破

  • javascript 鼠标事件总结

    javascript 鼠标事件总结

    常见的有以下8个: mousedown:鼠标的键钮被按下. mouseup:鼠标的键钮被释放弹起. click:单击鼠标的键钮. dblclick:鼠标的键钮被按下. contextmenu :弹出右键菜单. mouseover:鼠标移到目标的上方. mouseout:鼠标移出目标的上方. mousemove:鼠标在目标的上方移动. mousedown事件与mouseup事件可以说click事件在时间上的细分,顺序是mousedown => mouseup => click.因此一个点击事件,

  • javascript 动态改变onclick事件触发函数代码

    javascript 动态改变onclick事件触发函数代码 function oc() { alert("原本的方法"); } function od() { alert("我改变方法了."); } function of() { document.getElementById('name').onclick = function(){ od(); }; } 原来的方法 通过点击,改变原来的方法的执行 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • javascript 键盘事件总结 推荐

    在form中, submit的快捷键是 enter,reset的快捷键是 esc.不过在IE6,safari4,ff3.5,opera10,chrome中,按Enter,不但激发form的submit事件,同时也会激发提交按钮的onclick,激发顺序为提交按钮的 onclick → form 的 onsubmit. 键盘事件 键盘事件 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 不过并不止提交按钮会激发form的submit事件,连同上面的归纳如下: 1. 如果表单里有一个ty

  • JavaScript获取onclick、onchange等事件值的代码

    今天小菜处理下拉菜单级联问题时,想获取HTML标签中某个事件的内容,也就是值,比如从<select id="city" onchange="javascript:test();"></select>中获取javascript:test();. 小菜想通过事件中的信息,确定下一级的菜单,但是这个貌似很简单的问题,却让小菜纠结了一番. 稍微懂点JQuery的童鞋,可能会尝试这样获取: 复制代码 代码如下: $(document).ready(fu

  • 阻止JavaScript事件冒泡传递（cancelBubble 、stopPropagation）

    cancelBubble在IE下有效 stopPropagation在Firefox下有效 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml

  • IE8的JavaScript点击事件(onclick)不兼容的解决方法

    博客园闪存分页是用JavaScript生成的,今天发现在IE8下点击页码不能翻页,翻页操作是在当前页码的onclick事件中进行的. 开始代码是这么写的: 复制代码 代码如下: var a = document.createElement("a");a.setAttribute("onclick", this.ClickFunctionName + "(" + pageIndex + ");Pager.SetCurrent("

  • JavaScript onkeydown事件入门实例(键盘某个按键被按下)

    JavaScript onkeydown 事件 用户按下一个键盘按键时会触发 onkeydown 事件.与 onkeypress事件不同的是,onkeydown 事件是响应任意键按下的处理(包括功能键),onkeypress 事件只响应字符键按下后的处理. 提示 Internet Explorer/Chrome 浏览器使用 event.keyCode 取回被按下的字符,而 Netscape/Firefox/Opera 等浏览器使用 event.which. onkeydown 获取用户按下的键

  • javascript监听鼠标滚轮事件浅析

    我们都见到过这些效果,用鼠标滚轮实现某个表单内的数字增加减少操作,或者滚轮控制某个按钮的左右,上下滚动.这些都是通过js对鼠标滚轮的事件监听来实现的.今天这里介绍的是一点简单的js对于鼠标滚轮事件的监听. 不同浏览器不同的事件 首先,不同的浏览器有不同的滚轮事件.主要是有两种,onmousewheel(firefox不支持)和DOMMouseScroll(只有firefox支持),关于这两个事件这里不做详述,想要了解的朋友请移步:鼠标滚轮(mousewheel)和DOMMouseScroll事件

  • JavaScript window.document的属性、方法和事件小结

    javascript中window.document的属性.方法和事件的总结,有需要的朋友可参考一下本文章. 属性: Attributes 存储节点的属性列表(只读) childNodes 存储节点的子节点列表(只读) dataType 返回此节点的数据类型 Definition 以DTD或XML模式给出的节点的定义(只读) Doctype 指定文档类型节点(只读) documentElement 返回文档的根元素(可读写) firstChild 返回当前节点的第一个子节点(只读) Implem

  • JavaScript 模拟用户单击事件

    JavaScript 模拟用户单击事件

    一开始,我想到了用jQuery的click()事件来触发超链接的单击事件(与trigger("click")一样的效果).结果发现不如人意. 实例如下: 效果图 IE: FireFox:   复制代码 代码如下: <h3>请单击"Click Me".测试提交按钮与超链接是否也被单击了.</h3>     <button id="btn">Click Me</button>     <form

  • javascript相关事件的几个概念

    客户端javascript程序采用了异步事件驱动编程模型. 相关事件的几个概念: 事件类型(event type):用来说明发生什么类型事件的字符串: 事件目标(event target):发生事件的对象: 事件处理程序(event handler):处理或响应事件的函数: 事件对象(event object):与特定事件相关且包含有关该事件详细信息的对象: 事件传播(event propagation):浏览器决定哪个对象出发其事件处理程序的过程: 注册事件处理程序: 1.设置javascri

  • Javascript 模拟点击事件(点击链接与html点击) 兼容IE/Firefox

    一把情况下模拟点击一般两个方面,模拟点击超级连接事件firefox的兼容的函数为对HTMLAnchorElement 加入onclick事件 复制代码 代码如下: try { // create a element so that HTMLAnchorElement is accessible document.createElement('a'); HTMLElement.prototype.click = function () { if (typeof this.onclick == 'f

随机推荐