本文實例講述了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 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是用於處理使用輸入法時能輸入中文或字母的問題。
通過String.fromCharCode()得到ASCII碼對應的字符。
希望本文所述對大家的javascript程序設計有所幫助。