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 document.execCommand() 常用解析
Dec 14 Javascript
基于jquery的finkyUI插件与Ajax实现页面数据加载功能
Dec 03 Javascript
JS 两个字符串时间的天数差计算
Aug 25 Javascript
JavaScript简单获取页面图片原始尺寸的方法
Jun 21 Javascript
canvas实现简易的圆环进度条效果
Feb 28 Javascript
AngularJs1.x自定义指令独立作用域的函数传入参数方法
Oct 09 Javascript
微信小程序实现富文本图片宽度自适应的方法
Jan 20 Javascript
总结4个方面优化Vue项目
Feb 11 Javascript
Vue源码学习之关于对Array的数据侦听实现
Apr 23 Javascript
vue中使用极验验证码的方法(附demo)
Dec 04 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
Oct 26 Javascript
vue vant中picker组件的使用
Nov 03 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之字符串变相相减的代码
2007/03/19 PHP
php自动加载机制的深入分析
2013/06/08 PHP
解析PHP处理换行符的问题 \r\n
2013/06/13 PHP
php实现邮件发送并带有附件
2014/01/24 PHP
php获取用户浏览器版本的方法
2015/01/03 PHP
如何解决PHP获取不到SESSION信息之一般情况
2019/10/10 PHP
js自带函数备忘 数组
2006/12/29 Javascript
JavaScript 入门基础知识 想学习js的朋友可以参考下
2009/12/26 Javascript
使用Firebug对js进行断点调试的图文方法
2011/04/02 Javascript
jquery定时滑出可最小化的底部提示层特效代码
2013/10/02 Javascript
JS教程:window.location使用方法的区别介绍
2013/10/04 Javascript
仿淘宝TAB切换搜索框搜索切换的相关内容
2014/09/21 Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
2014/09/25 Javascript
JavaScript核心语法总结(推荐)
2016/06/02 Javascript
JavaScript实现url参数转成json形式
2016/09/25 Javascript
Bootstrap导航条学习使用(一)
2017/02/08 Javascript
JavaScript中object和Object的区别(详解)
2017/02/27 Javascript
ES6学习教程之Map的常用方法总结
2017/08/03 Javascript
解决bootstrap模态框数据缓存的问题方法
2018/08/10 Javascript
解决axios会发送两次请求,有个OPTIONS请求的问题
2018/10/25 Javascript
js类的继承定义与用法分析
2019/06/21 Javascript
微信小程序基于Taro的分享图片功能实践详解
2019/07/12 Javascript
微信小程序获取地理位置及经纬度授权代码实例
2019/09/18 Javascript
Echarts地图添加引导线效果(labelLine)
2019/09/30 Javascript
Python的字典和列表的使用中一些需要注意的地方
2015/04/24 Python
简单讲解Python中的数字类型及基本的数学计算
2016/03/11 Python
浅谈Python浅拷贝、深拷贝及引用机制
2016/12/15 Python
django.db.utils.ProgrammingError: (1146, u“Table‘’ doesn’t exist”)问题的解决
2018/07/13 Python
python可视化篇之流式数据监控的实现
2019/08/07 Python
Python实现括号匹配方法详解
2020/02/10 Python
纯CSS实现菜单、导航栏的3D翻转动画效果
2014/04/23 HTML / CSS
国际领先的在线时尚服装和配饰店:DressLily
2019/03/03 全球购物
小学绿色学校申报材料
2014/08/23 职场文书
三潭印月的导游词
2015/02/12 职场文书
单身申明具结书
2015/02/26 职场文书
Mysql数据库命令大全
2021/05/26 MySQL