Javascript控制input輸入時間格式的方法
本文實(shí)例講述了Javascript控制input輸入時間格式的方法。分享給大家供大家參考。具體分析如下：
之前做了一個Javascript控制時間格式的輸入，主要用到了keydown和keyup兩個事件，但感覺寫的很復(fù)雜而且還有bug。
今日了解了一下keypress事件與keydown和keyup的區(qū)別。大致如下（目前只了解這么多）：
keydown：按鍵按下的時候觸發(fā)，通過event可以獲取到keyCode，可以獲取到文本框輸入之前的值；
keyup：按鍵彈出（松開）時觸發(fā)，通過event可以獲取到keyCode，可以獲取到文本框輸入之后的值；
keypress：此事件在Chrome和IE中基本相同，但Firefox有點(diǎn)不一樣；
1、在Chrome和IE中：只要按下的鍵能在文本框中出現(xiàn)字符則會觸發(fā)（如輸入字母、數(shù)字、符號等），通過event可以獲取到keyCode，event.key為undefined；不能出現(xiàn)字符的則不會觸發(fā)（如方向鍵、Home、Backspace等）
2、在火狐中：字母、數(shù)字、符號、方向、退格等按鍵均能觸發(fā)，均可以通過event.key獲取按鍵名，如果所按的鍵能輸出字符則event.keyCode為0，如果不能輸出字符則event.keyCode為對應(yīng)的ASCII碼
回到正題，先直接看代碼（上面提到的event就相當(dāng)于下面代碼中的e）：
$("input").on({
keyup : function (e) {
!/^[\d:]+$/.test(e.target.value) && (e.target.value = "");
},
keypress : function (e) {
if (isFF && e.keyCode !== 0) {
/// 在火狐中按任意鍵都會觸發(fā)keypress事件，而在IE/Chrome中只有按下能輸出字符的按鍵才會觸發(fā)
/// 針對火狐，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來區(qū)分Firefox能輸出字符的按鍵和不能輸出字符的按鍵，由于Firefox中e.keyCode不一定能取到值，所以使用了e.which來取代。
keyup是用于處理使用輸入法時能輸入中文或字母的問題。
通過String.fromCharCode()得到ASCII碼對應(yīng)的字符。
希望本文所述對大家的javascript程序設(shè)計(jì)有所幫助。
- js 時間格式與時間戳的相互轉(zhuǎn)換示例代碼
- 詳解js正則表達(dá)式驗(yàn)證時間格式xxxx-xx-xx形式
- vue.js將unix時間戳轉(zhuǎn)換為自定義時間格式
- Extjs TimeField 顯示正常時間格式的代碼
- JavaScript下的時間格式處理函數(shù)Date.prototype.format
- js將當(dāng)前時間格式轉(zhuǎn)換成時間搓(自寫)
- JavaScript下判斷時間格式的代碼
- javascript實(shí)現(xiàn)時間格式輸出FormatDate函數(shù)
- javascript實(shí)現(xiàn)的時間格式加8小時功能示例
相關(guān)文章
webpack 是一個現(xiàn)代 JavaScript 應(yīng)用程序的模塊打包器(module bundler)。這篇文章主要介紹了Webpack框架核心概念(知識點(diǎn)整理),需要的朋友可以參考下2017-12-12
這篇文章主要給大家介紹了關(guān)于Webpack按需加載打包c(diǎn)hunk命名的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用Webpack具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
JavaScript 原型繼承之構(gòu)造函數(shù)繼承
JavaScript 是基于原型的面向?qū)ο笳Z言。也就是說，每個實(shí)例對象都具有一個原型。對象從該原型中繼承屬性和方法。這一篇將具體說說構(gòu)造函數(shù)的繼承。2011-08-08
jstree創(chuàng)建無限分級樹的方法【基于ajax動態(tài)創(chuàng)建子節(jié)點(diǎn)】
這篇文章主要介紹了jstree創(chuàng)建無限分級樹的方法,結(jié)合實(shí)例形式分析了jstree基于ajax結(jié)合asp.net后臺動態(tài)創(chuàng)建子節(jié)點(diǎn)實(shí)現(xiàn)無限分級樹效果的相關(guān)步驟與操作技巧,需要的朋友可以參考下2016-10-10
Bootstrap每天必學(xué)之縮略圖與警示窗，對Bootstrap縮略圖與警示窗小編也了解的很少，希望通過這篇文章和大家更多的去學(xué)習(xí)Bootstrap縮略圖與警示窗，從中得到收獲。2015-11-11
JavaScript前端控制網(wǎng)絡(luò)并發(fā)數(shù)目的常見方法小結(jié)
控制前端發(fā)起請求的并發(fā)數(shù),即限制同一時間內(nèi)進(jìn)行處理的請求數(shù)量,是一種有效的策略,本文將詳細(xì)介紹前端控制并發(fā)數(shù)的幾種常見做法,希望對大家有所幫助2023-12-12
本篇文章主要是對判斷js腳本加載完成的方法進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
這篇文章主要介紹了JavaScript中的數(shù)值范圍介紹,本文是對JavaScript中Number類型的追根究底,讀完本文將會對Number類型有一個徹底了解,需要的朋友可以參考下2014-12-12
據(jù)說，對于網(wǎng)頁開發(fā)人員來說，F(xiàn)irebug是Firefox瀏覽器中最好的插件之一。2010-08-08
js函數(shù)與php函數(shù)的區(qū)別實(shí)例淺析
這篇文章主要介紹了js函數(shù)與php函數(shù)的區(qū)別,以實(shí)例形式較為簡單的分析了js函數(shù)與php函數(shù)語法及應(yīng)用上的不同點(diǎn),具有一定參考借鑒價值,需要的朋友可以參考下2015-01-01