表单事件，、

表单事件

 onblur//失去焦点时
onchange //内容被改边时
onfocus //获取焦点时
.oninput //用户输入时
onreset//当表单被重置时，作用于form标签
onselect//当内容被选中时
onsubmit //当表单被提交时，作用于form标签；
　　案例
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        
    </head>
    <body>
        <form action="#">
            <input type="text" name="n1"/>
            <input type="text" name="n2"/>
            <input type="text" name="n3"/>
            <input type="text" name="n4"/>
            <input type="text" name="n5"/>
            <input type="text" name="n6"/>
            <input type="text" name="n7"/>
            <input type="reset" />
            <input type="submit" />
        </form>
        <script>
            var n=document.querySelectorAll('[name]');
            var form=document.querySelector('form');
            console.log(form);
            n[0].onblur=function(){
                this.value='失去焦点了';
                //失去焦点时
            }
            n[1].onchange=function(){
                this.value='改不了';
                //内容被改边时
            }
            n[2].onfocus=function(){
                this.value='获取焦点';
                //获取焦点时
            }
            n[3].oninput=function(){
                this.value='想输入没门？';
                //用户输入时
            }
            form.onreset=function(){
                alert('清空了');
                //当表单被重置时，作用于form标签
            }
            n[4].onselect=function(){
                this.value='选中我想干嘛';
                //当内容被选中时
            }
            form.onsubmit=function(){
                alert('恭喜你提交成功');
                //当表单被提交时，作用于form标签；
            }
        </script>
    </body>
</html>

 

 
posted @ 2019-07-11 19:25  深夜的海洋  阅读(175)  评论(0)    收藏  举报