Javascript控制input输入时间格式的方法


Posted in Javascript onJanuary 28, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
TinyMCE 新增本地图片上传功能
Nov 05 Javascript
Javascript高级技巧分享
Feb 25 Javascript
java和javascript获取word文档的书签位置对比
Jun 19 Javascript
基于javascript实现九宫格大转盘效果
May 28 Javascript
jquery实现简单的banner轮播效果【实例】
Mar 30 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
Jun 25 Javascript
Angular ng-repeat指令实例以及扩展部分
Dec 26 Javascript
JS获取多维数组中相同键的值实现方法示例
Jan 06 Javascript
详解Node.js中exports和module.exports的区别
Apr 19 Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
Aug 09 Javascript
VUE v-model表单数据双向绑定完整示例
Jan 21 Javascript
关于Vue中$refs的探索浅析
Nov 05 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
Jan 28 #Javascript
js封装可使用的构造函数继承用法分析
Jan 28 #Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
Jan 28 #Javascript
javascript原型链继承用法实例分析
Jan 28 #Javascript
Jquery 实现图片轮换
Jan 28 #Javascript
javascript查询字符串参数的方法
Jan 28 #Javascript
Jquery 实现弹出层插件
Jan 28 #Javascript
You might like
php UTF-8、Unicode和BOM问题
2010/05/18 PHP
PHP基于正则批量替换Img中src内容实现获取缩略图的功能示例
2017/06/07 PHP
jquery实现通用版鼠标经过淡入淡出效果
2014/06/15 Javascript
js实现点击图片改变页面背景图的方法
2015/02/28 Javascript
javascript模拟评分控件实现方法
2015/05/13 Javascript
jQuery EasyUi实战教程之布局篇
2016/01/26 Javascript
轻松掌握JavaScript代理模式
2016/08/26 Javascript
js手动播放图片实现图片轮播效果
2016/09/17 Javascript
Vue.js中轻松解决v-for执行出错的三个方案
2017/06/09 Javascript
JavaScript实现的滚动公告特效【基于jQuery】
2019/07/10 jQuery
微信小程序实现横向滚动导航栏效果
2019/12/12 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
2020/10/24 Javascript
Python实现对excel文件列表值进行统计的方法
2015/07/25 Python
python将unicode转为str的方法
2017/06/21 Python
Python编程之微信推送模板消息功能示例
2017/08/21 Python
有关Python的22个编程技巧
2018/08/29 Python
Python中如何使用if语句处理列表实例代码
2019/02/24 Python
python中的split()函数和os.path.split()函数使用详解
2019/12/21 Python
postman和python mock测试过程图解
2020/02/22 Python
使用Python发现隐藏的wifi
2020/03/04 Python
python利用递归方法实现求集合的幂集
2020/09/07 Python
CSS3新属性transition-property transform box-shadow实例学习
2013/06/06 HTML / CSS
app内嵌H5 webview 本地缓存问题的解决
2020/10/19 HTML / CSS
东南亚地区最大的购物网站Lazada新加坡站点:Lazada.sg
2016/07/17 全球购物
工程地质勘察专业大学生求职信
2013/10/13 职场文书
护士自荐信范文
2013/12/15 职场文书
酒店前厅员工辞职信
2014/01/08 职场文书
雏鹰争章活动总结
2014/05/09 职场文书
高中同学会活动方案
2014/08/14 职场文书
转让协议书范本
2014/09/13 职场文书
党员检讨书
2014/10/13 职场文书
租车协议书范本2014
2014/11/17 职场文书
2014年维修工作总结
2014/11/22 职场文书
师德师风培训感言
2015/08/03 职场文书
南阳市白酒市场的调查报告
2019/11/08 职场文书
CentOS8.4安装Redis6.2.6的详细过程
2021/11/20 Redis