Javascript控制input輸入時(shí)間格式的方法

更新時(shí)間：2015年01月28日 12:04:03 投稿：shichen2014

這篇文章主要介紹了Javascript控制input輸入時(shí)間格式的方法,涉及鼠標(biāo)事件及正則表達(dá)式的靈活應(yīng)用,需要的朋友可以參考下

本文實(shí)例講述了Javascript控制input輸入時(shí)間格式的方法。分享給大家供大家參考。具體分析如下：

之前做了一個(gè)Javascript控制時(shí)間格式的輸入，主要用到了keydown和keyup兩個(gè)事件，但感覺寫的很復(fù)雜而且還有bug。

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

keydown：按鍵按下的時(shí)候觸發(fā)，通過event可以獲取到keyCode，可以獲取到文本框輸入之前的值；

keyup：按鍵彈出（松開）時(shí)觸發(fā)，通過event可以獲取到keyCode，可以獲取到文本框輸入之后的值；

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

1、在Chrome和IE中：只要按下的鍵能在文本框中出現(xiàn)字符則會(huì)觸發(fā)（如輸入字母、數(shù)字、符號(hào)等），通過event可以獲取到keyCode，event.key為undefined；不能出現(xiàn)字符的則不會(huì)觸發(fā)（如方向鍵、Home、Backspace等）

2、在火狐中：字母、數(shù)字、符號(hào)、方向、退格等按鍵均能觸發(fā)，均可以通過event.key獲取按鍵名，如果所按的鍵能輸出字符則event.keyCode為0，如果不能輸出字符則event.keyCode為對(duì)應(yīng)的ASCII碼

回到正題，先直接看代碼（上面提到的event就相當(dāng)于下面代碼中的e）：

復(fù)制代碼代碼如下:

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) {

            /// 在火狐中按任意鍵都會(huì)觸發(fā)keypress事件，而在IE/Chrome中只有按下能輸出字符的按鍵才會(huì)觸發(fā)

            /// 針對(duì)火狐，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;

        }

    }

});