检测输入框字数的变化注意onpropertychange oninput onchange onkeyup区别

最新推荐文章于 2020-01-10 22:30:23 发布

weixin_33963594

最新推荐文章于 2020-01-10 22:30:23 发布

阅读量84

点赞数

原文链接：http://www.cnblogs.com/miss-radish/p/3584413.html

版权

做如下图这样一个输入框，并实时监测输入框中的字数变化，因此用到了onpropertychange事件，oninput事件，下面便对这些事件做如下分析。

onpropertychange：DOM任何节点的属性发生变化时触发，包括js修改的属性。但是这是IE特有的一个事件；

oninput：仅仅在input的value值发生改变才会触发，鼠标键盘复制粘贴均可以触发，但是js修改其value值则不会触发。（chrome/safari/ff/opera/IE9+）

onchange：域的内容改变，并且失去焦点时触发（js改变其内容时不会触发）。

onkeyup：在键盘松开时触发。(如果用鼠标复制粘贴则不会触发)

在textarea中，如果想捕获用户的键盘输入，用onkeyup检查事件就可以了，但是onkeyup并不支持复制和粘贴，因此需要动态监测textarea中值的变化，这就需要onpropertychange（用在IE浏览器）和oninput（非IE浏览器）结合在一起使用了。

下面附上代码：

html css

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta http-equiv="content-type"  content="text/html;charset=utf-8">
 5     <title>实时动态检测input字数</title>
 6     <style type="text/css">
 7         .titlesec{
 8             background-color:#e5eef8;
 9             font-size:14px;
10             font-weight:bold;
11             padding:5px 27px;
12         }
13         .titlesec span{
14             font-size:12px;
15             color:#5c93be;
16             font-weight:normal;
17             vertical-align:middle;
18         }
19         .editnr{
20             padding:20px;
21             text-align:center;
22         }
23         textarea.editcom{
24             border:1px solid #9ec7e7;
25             color:#7f7f7f;
26             padding:6px;
27             width:98%;
28             font-size:9pt;
29             height:80px;
30             overflow:auto;}
31     </style>
32 
33 </head>
34 <body>
35     <div class="titlesec">
36         我要评论：<span id="comLen" >您还可以录入300字</span>
37     </div>
38     <div class="editnr">
39         <textarea id="editcom"class="editcom">请您输入内容</textarea>
40         <input type="button" value="submit"/>
41     </div>      
42 </body>
43 </html>

script

 <script type="text/javascript">
        var EventObject={
            keyPress:function(){
                var maxLen=300;
                var text=obj.value;
                var len=text.length;
                if(len>maxLen){
                    alert("您输入的内容已超出限制！");
                    obj.value=text.substring(0,maxLen);
                    len=0;
                } else{
                    len=maxLen-len;
                }
                document.getElementById("comLen").innerHTML="您还可以录入" + len + "字";
            },
            onfocus:function(){
                var value=obj.value;
                if(value.trim()=='请您输入内容')
                    obj.value='';
                event.cancelBubble = true;
                return false;
            },
            onblur:function(){
                var value=obj.value;
                if(value.trim()=='')
                    obj.value='请您输入内容';
            }
        };
        //去除空格
        String.prototype={
            trim:function(){
                return this.replace(/(^\s*)|(\s*$)/g, "");
            }
            trimLeft: function () {
               return this.replace(/(^\s*)/g, "");
            },
            trimRight:function(){
                return this.replace(/(\s*$)/g, "");
            }
        };
        var obj=document.getElementById("editcom");
//      obj.onpropertychange=EventObject.keyPress;
        obj.onfocus = EventObject.onfocus;
        obj.onblur=EventObject.onblur;
        if(window.ActiveXObject) {//IE
            obj.onpropertychange= EventObject.keyPress;
        }else{//非IE
            obj.οninput=EventObject.keypress;
        }
    </script>

附言：小妹2014年毕业现在还在实习阶段，以上内容如有错请各位大神多多指点。

转载于:https://www.cnblogs.com/miss-radish/p/3584413.html

weixin_33963594

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
检测输入框字数的变化注意onpropertychange oninput onchange onkeyup区别

做如下图这样一个输入框，并实时监测输入框中的字数变化，因此用到了onpropertychange事件，oninput事件，下面便对这些事件做如下分析。onpropertychange：DOM任何节点的属性发生变化时触发，包括js修改的属性。但是这是IE特有的一个事件；oninput：仅仅在input的value值发生改变才会触发，鼠标键盘复制粘贴均可以触发，但是js修改其value值则...
复制链接

扫一扫