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

 更新时间:2015年01月28日 12:04:03   投稿:shichen2014   我要评论
这篇文章主要介绍了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):

复制代码 代码如下:
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 html5 canvas画布中删除一个块区域的方法

    JavaScript html5 canvas画布中删除一个块区域的方法

    这篇文章主要介绍了JavaScript html5 canvas画布中删除一个块区域的方法,涉及JavaScript结合html5操作canvas画布图形绘制的技巧,需要的朋友可以参考下
    2016-01-01
  • JavaScript实现时间倒计时跳转(推荐)

    JavaScript实现时间倒计时跳转(推荐)

    这篇文章主要介绍了JavaScript实现时间倒计时跳转(推荐)的相关资料,涉及到settimeout和setinterval方法的介绍,非常不错具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • javascript中判断json的方法总结

    javascript中判断json的方法总结

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式。同时,JSON是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的API或工具包,接下来跟着小编学习js中判断json的方法吧
    2015-08-08
  • 微信js-sdk分享功能接口常用逻辑封装示例

    微信js-sdk分享功能接口常用逻辑封装示例

    这篇文章主要介绍了微信js-sdk分享功能接口常用逻辑封装,简单介绍了分享功能接口的功能、逻辑封装与使用方法,需要的朋友可以参考下
    2016-10-10
  • js中string和number类型互转换技巧(分享)

    js中string和number类型互转换技巧(分享)

    下面小编就为大家带来一篇js中string和number类型互转换技巧(分享)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • JS中的JSON对象的定义和取值实现代码

    JS中的JSON对象的定义和取值实现代码

    这篇文章主要介绍了JS中的JSON对象的定义和取值实现代码,也是json的入门知识,需要的朋友可以参考下
    2018-05-05
  • 浅谈JavaScript闭包

    浅谈JavaScript闭包

    这篇文章主要介绍了JavaScript闭包,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 小程序实现左滑删除功能

    小程序实现左滑删除功能

    这篇文章主要为大家详细介绍了小程序实现左滑删除功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-10-10
  • 原生JS实现平滑回到顶部组件

    原生JS实现平滑回到顶部组件

    返回顶部组件是一种极其常见的网页功能,需求简单:页面滚动一定距离后,显示返回顶部的按钮,点击该按钮可以将滚动条滚回至页面开始的位置,接下来通过本文给大家介绍原生JS实现平滑回到顶部组件,需要的朋友参考下吧
    2016-03-03
  • html+javascript实现可拖动可提交的弹出层对话框效果

    html+javascript实现可拖动可提交的弹出层对话框效果

    本文为大家介绍下使用html+javascript实现可拖动弹出层、对话框、可提交,具体代码如下,感兴趣的朋友可以参考下,希望对大家有所帮助
    2013-08-08

最新评论