14.1表單腳本

阿新 • • 發佈：2018-10-27

ima 是否 style down char tde test tlist 相關

<!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表單腳本

ima 是否 style down char tde test tlist 相關 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/>

14.1表單腳本

14.1表單腳本

JavaScript學習日誌（七）：表單腳本

表單腳本

MySQL分庫分表備份腳本

表單文本兩端對齊

16、MySQL數據庫分庫分表備份腳本

shell整理（35）====模擬用戶登錄的打印菜單腳本

【20171025中】alert(1) to win 腳本渲染自建

(轉)shell實現多級菜單腳本編寫

python寫一個乘法表的腳本

1、python腳本——監測服務器狀態

2017-11-27Linux基礎知識(14)bash特性之腳本編程初步

14.3、bash腳本編程

mysql聯表查詢腳本

HTML:讓表單文本框只讀，不可編輯的方法

Ubuntu-14.04. sh .py腳本雙擊無法執行問題的解決方法

Shell腳本編程小技巧(1)-如何解決腳本中多行重定向結束符不用對齊到行首

20.1-4 shell腳本介紹 shell腳本結構和執行 date命令用法 shell腳本中的變量

shell(1)介紹、腳本結構和執行、date命令、腳本中的變量、腳本中邏輯判斷、文件目錄屬性判斷

Chrome表單文本框自動填充黃色背景色樣式

14.1表單腳本

相關推薦