`
gshxsyq
  • 浏览: 20684 次
社区版块
存档分类
最新评论

实时监听js改变value,跨浏览器支持,实现类似IE的onpropertychange事件

    博客分类:
  • js
阅读更多
    onpropertychange事件。该事件在文本框属性改变时触发,不管是通过什么方式改变的。注意,是属性改变,而不仅仅是value改变。果然好使。然而,这个事件是IE专有的。
    oninput只在用户输入值改变时触发(即value改变),并非所有属性改变时触发,而且,通过js改变value时,oninput不会触发。
    在IE下用onpropertychange事件,对于其他浏览器,可以通过定时器检查只读文本框的内容是否改变。即采用setInterval循环检测的方法
$(function() {
	var deptNames = '';//用以存放改变之前的input value
		var deptNamesObj = $('#deptNames');//要检测的input对象。
		setInterval(checkChange,1000);
		function checkChange(){
			if(deptNamesObj.val()!= deptNames){
				changeDeptNames(deptNamesObj);//调用触发的事件函数,执行相应的操作
				deptNames =deptNamesObj.val();//将本次的改变保存起来,用以下次比较
			}
		}
}


总结:
1、onchange事件与onpropertychange事件的区别:
onchange事件在内容改变(两次内容有可能还是相等的)且失去焦点时触发;onpropertychange事件却是实时触发,即每增加或删除一个字符就会触发,通过js改变也会触发该事件,但是该事件IE专有。
2、oninput事件与onpropertychange事件的区别:
oninput事件是IE之外的大多数浏览器支持的事件,在value改变时触发,实时的,即每增加或删除一个字符就会触发,然而通过js改变value时,却不会触发;onpropertychange事件是任何属性改变都会触发的,而oninput却只在value改变时触发,oninput要通过addEventListener()来注册,onpropertychange注册方式跟一般事件一样。(此处都是指在js中动态绑定事件,以实现内容与行为分离)
3、oninput与onpropertychange失效的情况:
(1)oninput事件:a). 当脚本中改变value时,不会触发;b). 从浏览器的自动下拉提示中选取时,不会触发。
(2)onpropertychange事件:当input设置为disable=true后,onpropertychange不会触发。
分享到:
评论

相关推荐

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

    本文主要探讨的是在JavaScript中如何实现对表单元素value值的实时同步更新,同时考虑到跨浏览器的兼容性问题。在开发过程中,遇到的一个具体问题是:一个只读文本框需要实时显示另一个可编辑文本框的输入值,且在...

    JavaScript的onpropertychange事件

    总的来说,`onpropertychange`是针对IE浏览器的属性变化监听方案,而`MutationObserver`是现代浏览器的标准方法,它们都是为了帮助开发者实现实时响应对象或DOM元素属性的动态变化。在跨浏览器开发中,理解并正确...

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

    JavaScript 监听输入框值的即时变化 ...监听输入框值的即时变化可以使用onpropertychange 事件或oninput 事件来实现,但是需要注意浏览器的差异性问题,使用不同的事件和注册方法来适应不同的浏览器类型。

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

    标题:“JS监听表单value的修改同步问题,跨浏览器支持” 内容涉及的关键知识点包括: 1. 监听表单的value修改 在前端JavaScript开发中,监听表单元素(如输入框)的value值的改变是常见需求。常规的监听方式是...

    onchange和onpropertychange

    标题中的“onchange”和“onpropertychange”是JavaScript中两个...随着现代浏览器的普及,onpropertychange的使用已经越来越少,开发者应当转向使用更稳定的事件处理机制,如MutationObserver API,来实现类似的功能。

    兼容Firefox和IE的onpropertychange事件oninput

    特别是在处理表单元素如`<input>`的`value`属性变化时,`onpropertychange`能够实时监听并捕获每一次变化,无论用户是通过键盘输入还是通过复制粘贴改变文本框的内容。 `onchange`事件则是在元素失去焦点(blur)...

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

    要实现这些功能,JavaScript 提供了几个事件监听器,其中最常用的是 `onpropertychange` 和 `oninput`。 ### onpropertychange 事件 `onpropertychange` 是 Internet Explorer 浏览器特有的事件,当一个 HTML 元素...

    js onpropertychange输入框 事件获取属性

    总而言之,虽然`onpropertychange`在IE浏览器中提供了一种强大的实时输入事件监听方式,但为了保证网站的兼容性和用户体验,我们应当根据不同的浏览器环境,灵活使用`oninput`以及其他事件来实现输入框内容变化的...

    js实时监听文本框状态的方法

    通过以上策略,你可以实现跨浏览器的文本框状态实时监听,提升用户体验。在实际项目中,还可以结合其他技术,如Babel进行ES6转ES5以确保更广泛的浏览器兼容性,或者使用库和框架如jQuery、React等,它们通常已经处理...

    js监听input输入框值的实时变化实例.docx

    ### JavaScript 监听 Input 输入框值的实时变化 #### 知识点概览 1. **事件绑定方式**:理解并应用多种事件绑定方法(原生 JavaScript、jQuery)。 2. **兼容性处理**:针对不同浏览器(如 IE)采用不同的事件绑定...

    onchange,onpropertychange,oninput键盘输入和js赋值时区别

    在JavaScript中,`onchange`、`onpropertychange` 和 `oninput` 是与用户交互相关的事件,它们各自有特定的触发条件,特别是在处理表单元素的键盘输入和JavaScript动态赋值时。以下是对这三个事件的详细解释: 1. `...

    js中的onchange和onpropertychange (onchange无效的解决方法)

    一个跨浏览器的解决方案是使用 `MutationObserver` API,这是一个现代浏览器支持的API,用于监听DOM树的变动,包括元素属性的改变。 以下是一个使用 `MutationObserver` 实现类似 `onpropertychange` 功能的例子: ...

    浅析html input 等值改变添加监听事件

    在IE浏览器中,`onpropertychange`是监听输入变化的理想选择,但它并不被所有浏览器支持。 在非IE浏览器中,包括Chrome、Firefox、Safari等,`oninput`事件可以替代`onpropertychange`。`oninput`事件能够在元素的...

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

    在JavaScript开发中,处理用户输入事件是常见的需求,特别是在...在需要实时响应用户输入的情况下,可以考虑使用 `onpropertychange`(仅限IE)和 `oninput`(现代浏览器)组合的方式,以实现最佳的兼容性和用户体验。

    input标签内容改变的触发事件介绍

    `oninput`事件是除了IE之外的大多数现代浏览器所支持的事件,它会在`input`标签的`value`属性值改变时立即触发,无论是用户输入还是通过JavaScript修改。然而,需要注意的是,如果通过JavaScript直接设置`value`属性...

    当文本框的值发生改变时,触发事件,在IE中有效

    总的来说,跨浏览器的文本框值改变事件监听,需要考虑到IE的`onpropertychange`和现代浏览器的`input`事件。为了确保兼容性,开发者通常会编写条件语句来针对不同的浏览器选择合适的事件监听器。

    JS判断文本框内容改变事件的简单实例

    在JavaScript中,文本框内容改变事件的监听是开发者经常需要用到的功能,主要用于实时检测用户在文本框内输入的变化,从而执行相应的处理逻辑。本篇文章主要介绍了三种在JavaScript中处理文本框内容改变事件的方法:...

    javascript 处理事件绑定的一些兼容写法

    对于特定的`onpropertychange`事件,这是IE特有的,当元素的某个属性改变时触发。非IE浏览器可以使用`oninput`事件作为替代,但其适用范围更窄。以下是如何添加`onpropertychange`事件监听器的代码: ```javascript...

    深入理解html表单输入监听

    由于跨浏览器兼容性问题,使用onpropertychange事件的代码可能在非IE浏览器中无法正常工作。此外,onpropertychange事件在测试时有可能不会生效,这可能跟浏览器的具体实现细节有关。 关于oninput与...

    让input框实现类似百度的搜索提示(基于jquery事件监听)

    可以通过监听`oninput`事件(主流浏览器支持)和`onpropertychange`事件(主要针对IE浏览器)来实现。对于`onpropertychange`事件的监听,可以使用jQuery的`.bind()`方法。 2. **数据获取**:当用户输入时,通过...

Global site tag (gtag.js) - Google Analytics