`
康敏栋
  • 浏览: 171103 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

onpropertychange兼容示例

    博客分类:
  • js
 
阅读更多
<div id="msg"></div> 
<input id='txt' value="" /> 
<script> 
//当状态改变的时候执行的函数 
function handle() 
{document.getElementById('msg').innerHTML='输入的文字长度为:'+document.getElementById('txt').value.length; 
} 
//firefox下检测状态改变只能用oninput,且需要用addEventListener来注册事件。 
if(/msie/i.test(navigator.userAgent))    //ie浏览器 
{document.getElementById('txt').onpropertychange=handle 
} 
else 
{//非ie浏览器,比如Firefox 
document.getElementById('txt').addEventListener("input",handle,false); 
} 
</script> 
分享到:
评论

相关推荐

    兼容Firefox和IE的onpropertychange事件oninput

    为了实现跨浏览器的兼容性,我们可以结合使用`onpropertychange`和`oninput`。在IE中使用`onpropertychange`,在非IE浏览器(如Firefox)中使用`oninput`。以下是一个示例: ```javascript function handle() { ...

    jquery下onpropertychange事件的绑定方法

    由于onpropertychange事件在不同浏览器中的兼容性问题,如果我们要使用jQuery来绑定onpropertychange事件,就需要使用bind()方法。这是因为jQuery的$.fn.bind()是一个跨浏览器的绑定事件的方法,可以在不同浏览器中...

    js onpropertychange输入框 事件获取属性

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

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

    相比于 `onpropertychange`,`oninput` 更具有跨浏览器兼容性,但它也有一个需要注意的地方:在某些浏览器中,必须使用 `addEventListener` 方法来绑定 `oninput` 事件,而不是直接在HTML属性中设置,否则可能无法...

    jquery keypress,keyup,onpropertychange键盘事件

    代码示例中,使用`bind`方法绑定了`onpropertychange`事件来监听文本框内容的变化: ```javascript jQuery('#textboxID').bind('onpropertychange', function() { // 在这里编写当文本框内容改变时执行的代码 }...

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

    结合上述知识点,我们可以编写一个示例代码,该代码不仅可以在非 IE 浏览器中使用 `oninput` 事件,还能在 IE 浏览器中使用 `onpropertychange` 事件。这样就可以为不同的浏览器用户提供一致的体验: ```html &lt;!...

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

    而在需要兼容旧版IE浏览器的项目中,则可以考虑使用onpropertychange事件。 综上所述,文章详细讲述了在Web开发中如何使用不同的JavaScript事件来监听input元素的值变化,并提供了多种方法来确保代码在不同浏览器中...

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

    2. **兼容性处理**:针对不同浏览器(如 IE)采用不同的事件绑定策略。 3. **事件类型**:掌握 `input` 和 `propertychange` 事件的区别及应用场景。 4. **事件对象**:了解事件对象的基本属性和方法。 5. **实际...

    两个INPUT同步输入的方法小结 兼容IE和firefox

    在实现两个INPUT同步输入时,虽然`onpropertychange`、`onkeydown`和`onkeyup`都可以达到目的,但从兼容性和功能完整性考虑,推荐使用`onkeyup`事件。它在IE和Firefox中都能正常工作,并且能确保在字符完全输入后...

    表单输入一定长度的字符然后自动提交

    1. **兼容性问题:** `onpropertychange`事件主要被IE浏览器支持,其他现代浏览器更倾向于使用`oninput`事件。因此,在开发时应考虑兼容性问题,或使用类似`jQuery`这样的库来简化事件绑定过程。 2. **用户体验:** ...

    限制 输入框字符长度 适用于中英文

    需要注意的是,这些方法主要适用于旧版的IE浏览器,现代浏览器如Chrome、Firefox通常使用`oninput`事件来代替`onpropertychange`,因为`oninput`事件在所有浏览器中都有较好的兼容性,并且能更准确地捕获用户输入的...

    input输入框内容实时监测(附代码)

    结合`oninput`和`onpropertychange`可以提供更广泛的浏览器兼容性,但请注意,这会增加代码复杂性,因为需要处理两个事件处理函数。在实际开发中,通常建议优先使用`oninput`,因为它在现代浏览器中的兼容性和性能更...

    js propertychange和oninput事件

    为了实现这样的兼容性处理,可以编写如下的JavaScript代码示例: ```javascript var inputElement = document.getElementById('yourInputId'); if ('oninput' in inputElement) { inputElement.addEventListener('...

    javascript兼容firefox的文本输入长度提示

    在本示例中,我们讨论的是如何在Firefox浏览器中实现一个兼容的文本输入长度提示功能。 首先,我们要明确`maxlength`属性,这是HTML中的一个属性,可以设置在`&lt;input&gt;`或`&lt;textarea&gt;`元素上,用于限制用户输入的...

    HTML的文本框效果

    在本篇文章中,我们将重点解析几个核心概念和技术要点: ... #### 1.1 `&lt;input&gt;`标签 ... - **类型属性`type`**...在实际开发中,还需要注意兼容性和性能优化等问题,以确保页面能够在不同的浏览器和设备上正常显示和运行。

    Input 特殊事件onpopertychange和oninput

    下面是一个简单的示例,展示了如何同时绑定 `oninput` 和 `onpropertychange`: ```javascript var inputElement = document.getElementById('myInput'); // 针对支持oninput的现代浏览器 if ('oninput' in input...

    Asp.net图片上传实现预览效果的简单代码

    为了解决这个问题,示例中引入了一个使用滤镜的div元素,并将FileUpload控件的onpropertychange事件绑定到了另一个JavaScript函数show1。在这个函数中,通过操作滤镜对象来在div元素中显示图片。这里特别使用了...

    检测input每次的输入是否合法遇到汉字输入就有问题

    结合以上知识点,可以编写一个兼容不同浏览器的输入验证示例: ```html var inputElement = document.getElementById('xx'); // IE 兼容 if (inputElement.attachEvent) { inputElement.attachEvent('...

    AJAX和DOM的运行经验

    - **错误示例**:假设我们希望通过AJAX获取一个XML文档,并尝试使用 `document.getElementsByName('tagname')` 来获取名为 "tagname" 的元素。 - **正确做法**:应该使用 `responseXML.getElementsByTagName('tag...

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

    下面是一个简单的示例: ```javascript function handle() { console.log(document.getElementById('txt').value); } document.getElementById('txt').addEventListener("input", handle); ``` 在这个例子中...

Global site tag (gtag.js) - Google Analytics