Javascript控制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、在火狐中：字母、数字、符号、方向、退格等按键均能触发，均可以通过event.key获取按键名，如果所按的键能输出字符则event.keyCode为0，如果不能输出字符则event.keyCode为对应的ASCII码
回到正题，先直接看代码（上面提到的event就相当于下面代码中的e）：
$("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程序设计有所帮助。
相关文章
webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)。这篇文章主要介绍了Webpack框架核心概念(知识点整理),需要的朋友可以参考下2017-12-12
这篇文章主要给大家介绍了关于Webpack按需加载打包chunk命名的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Webpack具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-09-09
JavaScript 是基于原型的面向对象语言。也就是说，每个实例对象都具有一个原型。对象从该原型中继承属性和方法。这一篇将具体说说构造函数的继承。2011-08-08
jstree创建无限分级树的方法【基于ajax动态创建子节点】
这篇文章主要介绍了jstree创建无限分级树的方法,结合实例形式分析了jstree基于ajax结合asp.net后台动态创建子节点实现无限分级树效果的相关步骤与操作技巧,需要的朋友可以参考下2016-10-10
Bootstrap每天必学之缩略图与警示窗，对Bootstrap缩略图与警示窗小编也了解的很少，希望通过这篇文章和大家更多的去学习Bootstrap缩略图与警示窗，从中得到收获。2015-11-11
控制前端发起请求的并发数,即限制同一时间内进行处理的请求数量,是一种有效的策略,本文将详细介绍前端控制并发数的几种常见做法,希望对大家有所帮助2023-12-12
本篇文章主要是对判断js脚本加载完成的方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
这篇文章主要介绍了JavaScript中的数值范围介绍,本文是对JavaScript中Number类型的追根究底,读完本文将会对Number类型有一个彻底了解,需要的朋友可以参考下2014-12-12
据说，对于网页开发人员来说，Firebug是Firefox浏览器中最好的插件之一。2010-08-08
这篇文章主要介绍了js函数与php函数的区别,以实例形式较为简单的分析了js函数与php函数语法及应用上的不同点,具有一定参考借鉴价值,需要的朋友可以参考下2015-01-01
最新评论