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程序设计有所帮助。
相关文章
这篇文章主要讲述如何在JavaScript脚本语言中调用Java类和接口，对大家的学习和工作有一定的参考借鉴价值，有需要的朋友们下面来一起看看吧。2016-09-09
这篇文章主要介绍了解决页面js接受Long型损失精度问题,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-03-03
这篇文章主要给大家介绍了关于jsonp跨域获取数据的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-07-07
这篇文章主要为大家详细介绍了JS模拟实现串行加法器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要为大家详细介绍了微信小程序模板之分页滑动栏的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
计算黄金分割的javascript代码...2007-07-07
这篇文章主要为大家详细介绍了JavaScript动态绑定，关于JavaScript中为元素绑定的事件失效的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-09-09
本篇文章主要介绍了template.js前端模板引擎使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
这篇文章主要为大家详细介绍了原生js实现上传图片控件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要为大家详细介绍了JavaScript实现10秒后再次获取验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
最新评论