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 相关文章推荐
javascript 写类方式之六
Jul 05 Javascript
Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)
Jun 11 Javascript
jQuery autocomplate 自扩展插件、自动完成示例代码
Mar 28 Javascript
jquery $.getJSON()跨域请求
Dec 21 Javascript
JS实现淘宝幻灯片效果的实现方法
Mar 22 Javascript
javascript使用location.search的示例
Nov 05 Javascript
javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
May 14 Javascript
JavaScript面向对象之私有静态变量实例分析
Jan 14 Javascript
简单总结JavaScript中的String字符串类型
May 26 Javascript
通过npm或yarn自动生成vue组件的方法示例
Feb 12 Javascript
详解Vue中的MVVM原理和实现方法
Jul 15 Javascript
微信小程序tab左右滑动切换功能的实现代码
Feb 08 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和XSS跨站攻击的防范
2007/04/17 PHP
PHP计划任务之关闭浏览器后仍然继续执行的函数
2010/07/22 PHP
简单谈谈PHP中的Reload操作
2016/12/12 PHP
Laravel框架验证码类用法实例分析
2019/09/11 PHP
使两个iframe的高度与内容自适应,且相等
2006/11/20 Javascript
关于文本框的一些限制控制总结~~
2010/04/15 Javascript
jquery()函数的三种语法介绍
2013/10/09 Javascript
Javascript字符串对象的常用方法简明版
2014/06/26 Javascript
JS数组array元素的添加和删除方法代码实例
2015/06/01 Javascript
jQuery中 delegate使用的问题
2015/07/03 Javascript
分享两段简单的JS代码防止SQL注入
2016/04/12 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
2016/12/14 Javascript
微信小程序 网络请求(post请求,get请求)
2017/01/17 Javascript
基于node.js依赖express解析post请求四种数据格式
2017/02/13 Javascript
通过源码分析Vue的双向数据绑定详解
2017/09/24 Javascript
微信小程序 如何引入外部字体库iconfont的图标
2018/01/31 Javascript
详解Vue之父子组件传值
2019/04/01 Javascript
vue实现购物车加减
2020/05/30 Javascript
[03:30]DOTA2完美“圣”典精彩集锦
2016/12/27 DOTA
python调用cmd复制文件代码分享
2013/12/27 Python
非递归的输出1-N的全排列实例(推荐)
2017/04/11 Python
python smtplib模块自动收发邮件功能(一)
2018/05/22 Python
NumPy 数组使用大全
2019/04/25 Python
Python 根据日志级别打印不同颜色的日志的方法示例
2019/08/08 Python
python实现低通滤波器代码
2020/02/26 Python
使用OpenCV获取图片连通域数量,并用不同颜色标记函
2020/06/04 Python
Python爬虫入门教程01之爬取豆瓣Top电影
2021/01/24 Python
聊聊Python pandas 中loc函数的使用,及跟iloc的区别说明
2021/03/03 Python
HTML5单页面手势滑屏切换原理
2016/03/21 HTML / CSS
UNDONE手表官网:世界领先的定制手表品牌
2018/11/13 全球购物
求职信需要的五点内容
2014/02/01 职场文书
城市创卫标语
2014/06/17 职场文书
放弃遗产继承公证书
2015/01/26 职场文书
收银员岗位职责
2015/02/03 职场文书
为Java项目添加Redis缓存的方法
2021/05/18 Redis
教你一步步实现一个简易promise
2021/11/02 Javascript