表单事件，、

初仔仔

于 2019-07-11 19:25:00 发布

阅读量58

点赞数

原文链接：http://www.cnblogs.com/GreenRadish/p/11172112.html

版权

表单事件

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

初仔仔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表单事件，、

表单事件onblur//失去焦点时onchange //内容被改边时onfocus //获取焦点时.oninput //用户输入时onreset//当表单被重置时，作用于form标签onselect//当内容被选中时onsubmit //当表单被提交时，作用于form标签；　　案例<!DOCTYPE html><html&gt...
复制链接

扫一扫