14.1表单脚本

Posted 2021-01-15 jokes

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了14.1表单脚本相关的知识，希望对你有一定的参考价值。

<!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表单脚本的主要内容，如果未能解决你的问题，请参考以下文章

LineageOS 14.1(CM14.1)的快速下载与编译

常用python日期日志获取内容循环的代码片段

代码片段：Shell脚本实现重复执行和多进程

SpringBoot中表单提交报错“Content type ‘application/x-www-form-urlencoded；charset=UTF-8‘ not supported“(代码片段

Selenium3.14.1+Python安装和第一个Demo

html 将以编程方式附加外部脚本文件的javascript代码片段，并按顺序排列。用于响应式网站，其中ma