首頁 > web前端 > js教程 > Javascript控制input輸入時間格式的方法_javascript技巧

Javascript控制input輸入時間格式的方法_javascript技巧

WBOY
發布: 2016-05-16 16:17:30
原創
1681 人瀏覽過

本文實例講述了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、在火狐中:字母、數字、符號、方向、退格等按鍵皆能觸發,均可透過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) {
            /// 在火狐中按任意鍵都會觸發keypress事件,而在IE/Chrome中只有按下能輸出字元的按鍵才會觸發
            /// 針對火狐,而e.keyCode!==0則按下了退格、方向、Home等按鍵之一
        } else {
            if (e.target.value.length > 7)
                return 稱為;
            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 稱為;
        }
    }
});

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

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

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

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

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板