Javascript控制input輸入時間格式的方法，input時間格式

Javascript控制input輸入時間格式的方法，input時間格式

本文執行個體講述了Javascript控制input輸入時間格式的方法。分享給大家供大家參考。具體分析如下：

之前做了一個Javascript控制時間格式的輸入，主要用到了keydown和keyup兩個事件，但感覺寫的很複雜而且還有bug。

今日瞭解了一下keypress事件與keydown和keyup的區別。大致如下（目前只瞭解這麼多）：

keydown：按鍵按下的時候觸發，通過event可以擷取到keyCode，可以擷取到文字框輸入之前的值；

keyup：按鍵彈出（鬆開）時觸發，通過event可以擷取到keyCode，可以擷取到文字框輸入之後的值；

keypress：此事件在Chrome和IE中基本相同，但Firefox有點不一樣；

1、在Chrome和IE中：只要按下的鍵能在文字框中出現字元則會觸發（如輸入字母、數字、符號等），通過event可以擷取到keyCode，event.key為undefined；不能出現字元的則不會觸發（如方向鍵、Home、Backspace等）

2、在Firefox中：字母、數字、符號、方向、退格等按鍵均能觸發，均可以通過event.key擷取按鍵名，如果所按的鍵能輸出字元則event.keyCode為0，如果不能輸出字元則event.keyCode為對應的ASCII碼

回到正題，先直接看代碼（上面提到的event就相當於下面代碼中的e）：

複製代碼 代碼如下:var isFF = /firefox/i.test(navigator.userAgent);
$("input").on({
    keyup : function (e) {
        !/^[\d:]+$/.test(e.target.value) && (e.target.value = "");
    },
    keypress : function (e) {
        if (isFF && e.keyCode !== 0) {
            /// 在Firefox中按任意鍵都會觸發keypress事件，而在IE/Chrome中只有按下能輸出字元的按鍵才會觸發
            /// 針對Firefox，e.keyCode!==0則按下了退格、方向、Home等按鍵之一
        } else {
            if (e.target.value.length > 7)
                return false;
            if (/\d{2}$/.test(e.target.value)) {
                e.target.value += ':';
            }
            var char = String.fromCharCode(e.keyCode === 0 ? e.which : e.keyCode);
            if (!/^\d/.test(char))
                return false;
        }
    }
});

通過isFF && e.keyCode !== 0來區分Firefox能輸出字元的按鍵和不能輸出字元的按鍵，由於Firefox中e.keyCode不一定能取到值，所以使用了e.which來取代。

keyup是用於處理使用IME時能輸入中文或字母的問題。

通過String.fromCharCode()得到ASCII碼對應的字元。

希望本文所述對大家的javascript程式設計有所協助。