您的位置：首页 > 运维架构

输入框input内容变化与onpropertychange事件的兼容

2014-11-20 17:36 666 查看
[b]一.输入框常用的几个事件[/b]

onblur元素失去焦点。
onchange域的内容被改变。
onclick当用户点击某个对象时调用的事件句柄。
ondblclick当用户双击某个对象时调用的事件句柄。
onfocus元素获得焦点。
onkeydown某个键盘按键被按下。
onkeypress某个键盘按键被按下并松开。
onkeyup某个键盘按键被松开。
onpaste粘贴　　　
oncopy复制
oncut剪切
下面对以上几个事件进行监听

varevents=[ 'keyup','keydown','copy','paste','input','blur','focus','keypress','change' ]; for(variinevents){ (function(i){ $addEvent(textarea,events[i],function(e){ console.log('event:'+events[i],e); }); })(i); }

　　

总结：

（1）关于blurfocus事件，都只会触发一次，什么意思呢，就是你点击输入框后，会触发一次focus事件，你在输入框中再怎么点都不会触发第二次focus。blur同理。

（2）关于keydown和keyup，在输入框输入文字时，首先触发keydown→keypress→input→keyup事件。

（3）关于change事件，在火狐和chrome下面用户在输入框输入文字后，输入框才会触发change事件，然后紧接着是失去焦点（blur）事件。

（4）面对特殊字符的表现

　　shift、control　　只有keydown→keyup两个事件，因为不会改变输入框内容，所以没有input事件

　　capslock　　　　火狐下面只有keydown事件，chrome可以判断是按下普通状态还是按下状态，给出的分别的keyup和keydown事件。

　　delete　　　　　如果删除了输入框的文字，触发的事件为

　　　　　　　　　　　　keydown→keypress（keypress事件在chrome下面有，火狐没有）→input→keyup事件

　　　　　　　　　　如果文字已经全删除，再次按delete触发的事件只有keydown→keyup事件

　　总之:

　　　　只有输入框中的文字内容变化了，input事件才会被触发。

　　　　基本上keydown和keyup就可以监听文本的变化了，但是无法监听到复制、粘贴事件（非快捷键）　　

（5）输入法开启时

　　输入的过程中不会出现keypress事件，触发的是keydown→input→keyup事件

（6）onpropertychange方法只能用在IE中，所以在判断一个输入框中内容改变时，需要兼容IE以及非IE问题

（7）程序控制输入框属性（height,value,innerHTML）

　　在IE中使用onpropertychange可以很好的进行捕获。

　　在非IE中无法捕获。

[b][b]二.需求[/b][/b]

[b][b]　　[/b][/b]现在问题来了，如何实时监听输入框的输入内容呢？

方案一：对IE监听onpropertychange事件，非IE使用input事件

varua=navigator.userAgent.toLowerCase(); varisIE=/msie/.test(ua); varnode=document.getElementById('input'); varfunc=function(){ //TODO } if(isIE){ node.attachEvent('onpropertychange',function(){ if(window.event.propertyName=='value'){ //func(); } }); }else{ node.addEventListener('input',func,false); }

方案二：

不区别浏览器，判断'keyup','paste','cut','mousedown','mouseup','keydown','focus'事件

//密集操作延时处理，减轻计算压力 $each(['keyup','paste','cut','mousedown','mouseup','keydown','focus'],function(event,index){ $addEvent(node,event,function(){ clearTimeout(me._checkTimer); me._checkTimer=setTimeout(function(){ me._checkInput(); },500); }); });


                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                

                    
                

            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航