input 输入框的事件触发及其顺序

<input id="field" type="text" />
<input type="text" onkeyup="if(!/^\d+$/.test(this.value)) { this.value='';}" />
<script>
    function g(type,selector){
        if(type=="id") return document.getElementById(selector);
        if(type=="class") return document.getElementsByClassName(selector);
        if(type=="tag") return document.getElementsByTagName(selector);
        if(type=="tag") return document.getElementsByTagName(selector);
    }
        g("id","field").onkeyup=function(){
        console.log("onkeyup");
    }
        g("id","field").onkeypress=function(){
        console.log("onkeypress");
    }
        g("id","field").onkeydown=function(){
        console.log("onkeydown");
    }
            g("id","field").onfocus=function(){
        console.log("onfocus");
    }
        g("id","field").onchange=function(){
        console.log("onChange");
    }
        g("id","field").oninput=function(){
        console.log("onInput");
    }
          g("id","field").onblur=function(){
           console.log("onblur");
       }
 
     setTimeout(function(){    //通过脚本改变
g("id","field").value="lla";

},2000)

运行结果:

情况一:只点击不输入(没有键盘事件)

input 输入框的事件触发及其顺序

 

情况二:点击加输入

input 输入框的事件触发及其顺序

onpress之后又出发了oninput事件

 

情况三:输入完了,鼠标离开这个input

input 输入框的事件触发及其顺序

触发了onchange和onblur事件

情况四:复制黏贴!

input 输入框的事件触发及其顺序

情况五:通过脚本添加

input 输入框的事件触发及其顺序

 

总结一下:

1.当你鼠标点击进去时触发onfocus(聚焦),离开时触发onblur(失焦),这两个当中会触发onchange事件,也就是聚焦-->失焦有个onchange

2.当往文字框输入文字时会触发oninput事件,不管你是键盘输入还是复制黏贴 

3,通过脚本添加文字,抱歉啥都不会触发。。。。。

 

脚本添加什么都不会触发? IE下有一个方法增加字节,就会触发    ----onpropertychange

----------------


1.onfocus  当input 获取到焦点时触发

2.onblur  当input失去焦点时触发,注意:这个事件触发的前提是已经获取了焦点再失去焦点的时候会触发相应的js

3.onchange 当input失去焦点并且它的value值发生变化时触发

4.onkeydown 在 input中有键按住的时候执行一些代码

5.onkeyup 在input中有键抬起的时候触发的事件,在此事件触发之前一定触发了onkeydown事件

6.onclick  主要是用于 input type=button,当被点击时触发此事件

7.onselect  当input里的内容文本被选中后执行一段,只要选择了就会触发,不是非得全部选中

8.oninput  当input的value值发生变化时就会触发,不用等到失去焦点(与onchange的区别)

以上事件可以直接放到input的属性里,例如:<input type="text" onfocus="a();" onblur="b()" onchange="c();" onkeydown="d();" />,也可以通过js给input dom元素添加相应的事件,如:document.getElementByTagName('input').onfocus = function();

转载于:http://www.cnblogs.com/llauser/p/6715409.html

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

使用新浪微博登陆