`

实时监听js改变value,跨浏览器支持

 
阅读更多
$(function()
		{
			var jsUserName = "";
			if($.browser.msie)	// IE浏览器
			{
				$("#userName").get(0).onpropertychange = setJsUserName;
				$("#jsUserName").get(0).onpropertychange = handle;
			}
			else	// 其他浏览器
			{
				var intervalName;	// 定时器句柄
				$("#userName").get(0).addEventListener("input",setJsUserName,false);
				
				// 获得焦点时,启动定时器
				$("#userName").focus(function(){
					intervalName = setInterval(handle,1000);
				});

				// 失去焦点时,清除定时器
				$("#userName").blur(function()
				{
					clearInterval(intervalName);
				});
			}
			
			// 设置jsUserName input的值
			function setJsUserName()
			{
				$("#jsUserName").val($(this).val());
			}
			
			// jsUserName input的值改变时执行的函数
			function handle()
			{	
				// IE浏览器此处判断没什么意义,但为了统一,且提取公共代码而这样处理。
				if($("#jsUserName").val() != jsUserName)
				{
					$("#toolTip").remove();
					$("#jsUserName").parent().append("<span id='toolTip'>看到这里的信息表明,通过js改变input的值也能响应相应事件:<span  style='color:red;'>" + $("#jsUserName").val() + "</span></span>");
					jsUserName = $("#jsUserName").val();
				}
			}
		});

 

转载:http://polaris1119.iteye.com

分享到:
评论

相关推荐

    js监听表单value的修改同步问题,跨浏览器支持.docx

    js监听表单value的修改同步问题,跨浏览器支持.docx

    JS针对浏览器窗口关闭事件的监听方法集锦

    本文实例总结了JS针对浏览器窗口关闭事件的监听方法。分享给大家供大家参考,具体如下: 方式一:(适用于IE浏览器,而且刷新不提示,只在点击浏览器关闭按钮的时候提示) [removed] [removed]=onclose; function ...

    js监听表单value的修改同步问题,跨浏览器支持

    一试,发现onchange根本没用,该事件是在文本框获得焦点,然后内容改变失去焦点后才触发的,现在在只读文本框上根本没有这些,它的内容是通过js改变的。于是,需要寻找另外的方法。 这时,在网上找到了...

    js事件监听机制(事件捕获)总结

    在前端开发过程中我们经常会遇到给页面元素添加事件的问题,添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同,le浏览器只有事件冒泡,...

    vue实现微信浏览器左上角返回按钮拦截功能

    主要介绍了vue实现微信浏览器左上角返回按钮拦截功能,本文通过实例代码相结合的形式给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

    vuejs中监听窗口关闭和窗口刷新事件的方法

    e.returnValue = '关闭提示'; } // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+ return '关闭提示'; }; 2、在生命周期钩子中注册监听事件 methods: { beforeunloadHandler (e) { // ... } } 在 mounted

    jQuery/JS监听input输入框值变化实例

    3、onchange event 所有主要浏览器都支持; 4、onchange 属性可以使用于:&lt;input&gt;, &lt;select&gt;, 和 &lt;textarea&gt;。 [removed] function change(){ var x=document.getElementById("password"); x....

    vue如何在用户要关闭当前网页时弹出提示的实现

    正常 js 页面处理方式 [removed] = function (e) { e = e || window.event; // 兼容IE8和Firefox 4之前的版本 if (e) { e.returnValue = '关闭提示'; } // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+ ...

    js propertychange和oninput事件

    oninput是标准浏览器的事件,一般应用于input元素,当input的value发生变化时就会发生,无论是键盘输入还是鼠标粘贴的改变都能即时监听到。 浏览器兼容 IE9以下是不支持的。这个时候就要用到IE专有的propertychange...

    提供async控制流JS类Zynga-Atom.zip

    Zynga-Atom 是小的 JS 类,它提供 async 控制流,属性监听器,屏障模式等。特点:小: 3.4kB ,压缩后 1.5kB。无依赖性:在浏览器中工作,或者是在 Node 中。能减少对深度嵌套回调的调用需求的编程模式。示例代码:...

    web-local-storage

    Amx.js是一个用纯JavaScript编写的全局状态管理,主要为解决页面或组件之间状态共享、管理等问题。 Amx第一版组要支持vue,还在编写过程中。 支持Amx技术: Storage - 浏览器提供的Storage关系型数据存储。 ...

    JavaScript常见事件处理程序实例总结

    本文实例总结了JavaScript常见事件处理程序。分享给大家供大家参考,具体如下: 事件指的是使用者或者浏览器自身执行的某种动作(比如点击事件)。响应这些事件的函数就叫做事件处理程序(或者叫事件监听器)。事件...

    单击浏览器右上角的X关闭窗口弹出提示的小例子

    单击浏览器右上角的X弹出提示窗口,简单实现。 代码如下:[removed] [removed] = function () { if (event.clientY &lt; 0 && event.clientX&gt; document.body.scrollWidth) { //event.returnValue = ...

    XML轻松学习手册--XML肯定是未来的发展趋势,不论是网页设计师还是网络程序员,都应该及时学习和了解

    CSS大家很熟悉了,全称是Cascading Style Sheets(层叠样式表),是目前用来在浏览器上显示XML文档的主要方法。 3.Behaviors Behaviors现在还没有成为标准。它是微软的IE浏览器特有的功能,用它可以对XML标识设定...

    DOM事件处理函数、DOM0,DOM2的优缺点

    此时单击按钮就会弹出此input的value,这个操作是通过指定onclick特性并将一些JavaScript代码作为它的值来定义的。由于这个值是JavaScript,因此不能使用未转义的HTML语法字符。 ① 特点 首先,这样

    ElementQuery:一个用于创建 css 元素查询的小 api。 当媒体还不够时

    元素查询支持大多数单位(px、em、%、rem、in、cm、vh、vw、pc、pt、mm、vw、vh、vmin、vmax)并且能够自定义滚动你自己的,这个插件是高度可扩展的. 通过向全局实例添加自定义处理器,监听区域变化、高度、宽度、...

Global site tag (gtag.js) - Google Analytics