码迷,mamicode.com
首页 > 其他好文 > 详细

14.1表单脚本

时间:2018-10-27 14:41:12      阅读:137      评论:0      收藏:0      [点我收藏+]

标签:||   undefined   ar9   etc   mouseover   事件触发   问题   ==   布尔   

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Document</title>
</head>
<body>
<form> 
    <input type=‘submit‘ value=‘Submit Form‘ >
</form>
<form>  
    <button type=‘submit‘ name="submit-btn" autofocus>Submit Form</button>
</form>
<form name=‘form2‘>
    <input type=‘image‘ src=‘2.jpg‘ width=‘15%‘height=‘15%‘>
</form>
<form>
    <input type=‘reset‘ value=‘Rest From‘>
    <button type=‘reset‘>Rest From</button>
</form>
<form>
    <input type=‘text‘ id=‘t1‘ />
</form>
<script type="text/javascript">
    var EventUtil = {
            addHandler: function(element,type,handler){//添加事件
                if (element.addEventListener)
                {
                    element.addEventListener(type,handler,false);
                }else if (element.attachEvent)
                {
                    element.attachEvent(‘on‘+type,handler);
                }else {
                    element[‘on‘+type] = handler;
                }
            },
            getEvent: function(event){//获得事件对象
                return event || window.event;
            },
            getTarget: function(event){//获得事件元素
                return event.target || event.srcElement;
            },
            preventDefault: function(){//取消默认事件行为
                if (event.preventDefault)
                {
                    event.preventDefault();
                }else {
                    event.returnValue = false;
                }
            },
            removeHandler: function(element,type,handler){//取消事件
                if (element.removeEventListener)
                {
                    element.removeEventListener(type,handler,false)
                }else if (element.dettchEvent)
                {
                    element.dettchEvent(‘on‘+type,handler);
                }else {
                    element[‘on‘+type] = null;
                }
            },
            stopPropagation: function(event){//取消冒泡机制
                if (event.stopPropagation)
                {
                    event.stopPropagation();
                }else {
                    event.cancleBubble = true;
                }
            },
            getRelatedTarget: function(event){
                if (event.relatedTarget)
                {
                    return event.relatedTarget;//标准下返回相关元素
                }else if (event.toElement)
                {
                    return event.toElement;//mouseout事件触发,保存相关元素
                }else if (event.fromElement)
                {
                    return event.fromElement;//mouseover事件触发,保存相关元素
                }
            },
            getButton: function(event){//鼠标按钮兼容
                if (document.implementation.hasFeature(‘MouseEvents‘,‘2.0‘))//标准下
                {
                    return event.button;
                }else {
                    switch (event.button)//非标准下
                    {
                    case 0:
                    case 1:
                    case 3:
                    case 5:
                    case 7:
                        return 0;
                    case 2:
                    case 6:
                        return 2;
                    case 4:
                        return 1;
                    }
                }
            },
            getWheelDelta: function(event){//滚轮事件兼容
                //所以要兼容,写两个函数函数
                //client的兼容性必须先写出来
                if (event.wheelDelta)
                {
                    /*
                        兼容opear9.5以前版本的正负相反,mousewheel
                    */
                    return (window.client.engine.opera && window.client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);
                }else {
                    /*
                        兼容firefox正负和3的倍数的问题,DOMMouseScroll
                    */
                    return -event.detail*40;
                }
            },
            getCharCode: function(event){//键盘事件兼容
                if (typeof event.charCode == ‘number‘)//首先检测按键有没有代表的字符,如果没有就没有charCode,为undefined
                {
                    return event.charCode;
                }else {
                    return event.keyCode
                }
            }
        };
    var af = document.forms;
    /*
    function sub(event){
     event = EventUtil.getEvent(event);
     var target = EventUtil.getTarget(event);
    //target.elements获得是一个集合可以用下表取得也可以用名字获得    
     var btn = target.elements[‘submit-btn‘];
     document.body.innerHTML += btn ;
     //禁用提交
     btn.disable = true;
    }
    EventUtil.addHandler(af[1],‘submit‘,sub)
    
    //刷新网页设置聚焦的元素
    //如果input元素type属性为hidden或css的display和visibility属性隐藏了该字段,同样也会导致错误
    EventUtil.addHandler(window,‘load‘,function(event){
        document.forms[1].elements[‘submit-btn‘].focus();
    });
    
    //检测是否设置了autofocus,autofocus是布尔值
    EventUtil.addHandler(window,‘load‘,function(event){
        var element = document.forms[1].elements[‘submit-btn‘];
        if (element.autofocus !== true)
        {
            element.focus();
            console.log( ‘JS focus‘ );
        }
    });
    */
    var textBox = document.forms[document.forms.length-1].elements[0];
    console.log( textBox );
    EventUtil.addHandler(textBox,‘focus‘,change1);
    EventUtil.addHandler(textBox,‘blur‘,change2);
    EventUtil.addHandler(textBox,‘change‘,change3);
    function change1(event){
        event = EventUtil.getEvent(event);
        var target = EventUtil.getTarget(event);
        if (target.style.background === ‘‘)
        {
            target.style.background = ‘yellow‘;
        }
    }
    function change2(event){
        event = EventUtil.getEvent(event);
        var target = EventUtil.getTarget(event);
        if (/[^\d]/.test(target.value))
        {
            target.style.background = ‘red‘;
            
        }else {
            target.style.background = ‘‘;
        }
    }

    function change3(event){
        event = EventUtil.getEvent(event);
        var target = EventUtil.getTarget(event);
        console.log(1)
        if (/[^\d]/.test(target.value))
        {
            target.style.background = ‘red‘;
        }else {
            target.style.background = ‘‘;
        }
    }

</script>
</body>
</html>

 

 

 

 

change和blur的功能相近

 

blur与change事件在绝大部分的情况下表现都非常相似,输入结束后,离开输入框,会先后触发change与blur,唯有两点例外。

1. 没有进行任何输入时,不会触发change
在这种情况下,输入框并不会触发change事件,但一定会触发blur事件。在判断表单的修改状态时,这种差异会非常有用,通过change事件能轻易地找到哪些字段发生了变更以及其值的变更轨迹。

2. 输入后值并没有发生变更
这种情况是指,在没有失焦的情况下,在输入框内进行返回的删除与输入操作,但最终的值与原值一样,这种情况下,keydown、input、keyup、blur都会触发,但change依旧不会触发。

14.1表单脚本

标签:||   undefined   ar9   etc   mouseover   事件触发   问题   ==   布尔   

原文地址:https://www.cnblogs.com/jokes/p/9860878.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!