onchange,onpropertychange的使用

最新推荐文章于 2018-07-24 17:53:00 发布

iteye_8497

最新推荐文章于 2018-07-24 17:53:00 发布

阅读量290

点赞数

文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/iteye_8497/article/details/82393865

版权

一、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" οninput="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;
   }

iteye_8497

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
onchange,onpropertychange的使用

一、onchange 一般input type text的onchange事件的触发需要两个条件：1.输入框的值发生了改变；2.该文本框失去了焦点，而真正的事件的触发却是发生在该文本框失去焦点的时候，如果需要当值改变的时候就去触发，则需要用onpropertychange或者是oninput。二、onpropertychange/oninput 1.在IE下,可以用onproperty...
复制链接

扫一扫