`

onchange,onpropertychange的使用

 
阅读更多

一、onchange
 一般input type text的onchange事件的触发需要两个条件:1.输入框的值发生了改变;2.该文本框失去了焦点,而真正的事件的触发却是发生在该文本框失去焦点的时候,如果需要当值改变的时候就去触发,则需要用onpropertychange或者是oninput。
 
 二、onpropertychange/oninput
 
 1.在IE下,可以用onpropertychange来代替onchange事件,当文本框有任何变化时,能立即触发此事件.
 
 2.在其他浏览器下可以使用oninput事件来达到onpropertychange事件同样的效果
 
 三、使用onpropertychange/oninput的两种方式
 
   1.在页面直接使用
   <input type="text" name="myname" oninput="alert(this.value);" onpropertychange="alert(this.value)" />
   
   2.把他们分离到js中的使用
    
   注意在js中使用他们的时候oninput和普通事件注册的方法有些不同,必须使用addEventListener来注册。
   
   <script type="text/javascript">
    function testdemo(){
     var element = document.getElementById("myname");
     if("\v"=="v") {
      element.onpropertychange = textChange;
     }else{
      element.addEventListener("input",textChange,false);
     }
   
     function textChange(){
      alert(element.value);
     }
    }
   </script>
   
   <body>
    <input type="text" name="myname" id="myname" />
    <script type="text/javascript">
     testdemo();
    </script>
   </body>
   
   经过测试,兼容:IE6、IE7、IE8、Firefox
   onChange事件与onpropertychange类似,但是onchange()是在失去焦点时才触发。
   
   例子:规定在textarea中输入256个汉字,每输入一个汉字,在textarea下面会显示的还能输入多少个汉字会自动减1。
   <textarea name="remark" onpropertychange="textCounter(set.remark,set.remark_remain,256)" dataType="Require" require="false"
    maxlength="256" cols="52" rows="4" msg="备注必须在256个字之内">
    ${value.remark}
   </textarea>
   <BR> 您还可以输入<INPUT name="remark_remain" style="BORDER-RIGHT: 1px; BORDER-TOP: 1px; BORDER-LEFT: 1px; COLOR: red;
    BORDER-BOTTOM: 1px; BACKGROUND-COLOR: #eaffe0" readOnly maxLength="3" size="2" value="${256 -(fn:length(value.remark))}">个汉字,最大长度为:256。
    
   js方法
   function textCounter(fieldCheck, fieldShow,maxlimit) {
     if (fieldCheck.value.length > maxlimit)
     fieldCheck.value = fieldCheck.value.substring(0, maxlimit);
     else
     fieldShow.value = maxlimit - fieldCheck.value.length;
   }

分享到:
评论

相关推荐

    onchange和onpropertychange

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

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

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

    oninput,onpropertychange,onchange的用法和区别

    oninput、onpropertychange、onchange 的用法和区别 在 Web 开发中,了解 oninput、onpropertychange、onchange 三个事件的用法和区别非常重要,这三个事件都是用于检测用户输入的变化,但它们之间存在着一些关键的...

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

    在JavaScript中,`onchange` 和 `onpropertychange` 是两个不同的事件处理方式,它们各自在特定场景下有着不同的用途。本文将详细讲解这两个事件的区别以及如何解决 `onchange` 事件在某些情况下的无效问题。 `...

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

    在IE下,可以用onpropertychange来代替onchange事件,当文本框有任何变化时,能立即触发此事件. 这样一来问题就解决了. 那其他浏览器呢,onpropertychange可是IE的专利. 接下来就是oninput事件了. 但是oninput有个诡异,...

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

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

    JS中onpropertychange和onchange事件区别小结

    也就是说:onpropertychange事件在用键盘每改变一下文本框的值或用js改变其值便会触发一下,而onchange只有在用键盘改变其值,然后在失去焦点(onblur)后才触发,用js改变其值不能触发!onpropertychange和onchange都...

    jquery下onpropertychange事件的绑定方法

    然而,onchange事件只会在元素失去焦点时触发,这导致一个问题:当使用JavaScript动态改变输入框的值时(例如,通过计算来自动填入或修改值),并不会触发onchange事件,因为这种改变并不是由用户的直接输入引起的。...

    js onpropertychange输入框 事件获取属性

    对象的value属性被页面的脚本修改的时候,onchange无法捕获到,而onpropertychange却能够捕获。 具体理解为:onpropertychange能及时捕获属性值的变化,而onchange在属性值改变时只有通过鼠标执行某些操作才能激活该...

    兼容Firefox和IE的onpropertychange事件oninput

    在JavaScript中,处理DOM元素状态变化的事件有多种,其中包括`onpropertychange`、`onchange`和`oninput`。这些事件在不同浏览器中有着不同的表现和兼容性,尤其是在Internet Explorer (IE) 和 Firefox之间。 `...

    javascript 学习笔记(onchange等)

    1.onchange 及其onpropertychange,oninput 在IE下可使用onpropertychangel立即触发监听, oninput 可以使用在FF下,但必须使用w3c推荐的addEventListener的方式来绑定事件. //www.jb51.net/article/25275.htm2. &lt;...

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

    需要了解的知识 首先,我们需要了解onchange和onpropertychange的不同: IE下,当一个HTML元素的属性改变的时候,都能通过 onpropertychange来即时捕获。 onchange在属性值改变时还必须使得当前元素失去焦点(onblur...

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

    文章提到,IE9以下版本不支持oninput事件,可以使用onpropertychange作为替代方案。 文中还包含了一些关于如何在实际项目中应用这些监听事件的示例代码。例如,演示了如何利用oninput事件监听输入框的实时输入,并...

    关于onchange事件在IE和FF下的表现及解决方法

    因此,作者给出的最终解决方案是,为IE浏览器绑定onpropertychange事件,而为Firefox及其他浏览器绑定onchange事件。这是一个典型的浏览器兼容性处理策略,通过条件判断用户的浏览器类型,从而绑定不同的事件处理器...

Global site tag (gtag.js) - Google Analytics