时间: 2020-11-26|41次围观|0 条评论

表单事件

 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].οnblur=function(){
                this.value='失去焦点了';
                //失去焦点时
            }
            n[1].οnchange=function(){
                this.value='改不了';
                //内容被改边时
            }
            n[2].οnfοcus=function(){
                this.value='获取焦点';
                //获取焦点时
            }
            n[3].οninput=function(){
                this.value='想输入没门?';
                //用户输入时
            }
            form.onreset=function(){
                alert('清空了');
                //当表单被重置时,作用于form标签
            }
            n[4].οnselect=function(){
                this.value='选中我想干嘛';
                //当内容被选中时
            }
            form.onsubmit=function(){
                alert('恭喜你提交成功');
                //当表单被提交时,作用于form标签;
            }
        </script>
    </body>
</html>

 

 

转载于:https://www.cnblogs.com/GreenRadish/p/11172112.html

原文链接:https://blog.csdn.net/weixin_30342827/article/details/99882364

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自起风了,原文地址《表单事件,、
   

还没有人抢沙发呢~