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程序设计有所帮助。

赞 (0)

相关推荐

  • javascript使用正则控制input输入框允许输入的值方法大全

    1.只允许输入数字 <input name="username" type="text" onkeyup="value=this.value.replace(/\D+/g,'')"> 2.只允许输入英文字母.数字和下划线(以下二种方法实现) <input name="username" type="text" style="ime-mode:disabled">

  • Javascript获取标签ID改变style属性的代码

    实例JavaScript代码 下面的这段代码中,我们通过select元素的name属性来设置具体要访问style的哪个属性(本例中为背景色),这样,这个函数就可以用来设置不同的CSS属性了. 复制代码 代码如下: <script type="text/javascript"> var d = document.getElementById("d"); function setProperty(){ var set = document.getElemen

  • javascript实现依次输入input自动定焦

    javascript实现依次输入input自动定焦

    复制代码 代码如下: <html> <head> <script type="text/javascript">     function moveNext(object,index){         if(object.value.length==4){             document.forms[0].elements[index+1].focus();         }     }     function showResult(

  • javascript 获取url参数和script标签中获取url参数函数代码

    url paramter: 复制代码 代码如下: //lastest: var getArgs=function() {//get url querystring var params=document.location.search,reg=/(?:^\?|&)(.*?)=(.*?)(?=&|$)/g,temp,args={}; while((temp=reg.exec(params))!=null) args[temp[1]]=decodeURIComponent(temp[2]);

  • 比较简单的javascript实现input双击后可以编辑

    [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • javascript和jquery修改a标签的href属性

    javascript: 复制代码 代码如下: document.getElementById("myId").setAttribute("href","www.xxx.com"); document.getElementById("myId").href = "www.xxx.com"; jquery: 复制代码 代码如下: $("#myId").attr("href"

  • JavaScript获取并更改input标签name属性的方法

    本文实例讲述了JavaScript获取并更改input标签name属性的方法.分享给大家供大家参考.具体实现方法如下: <input name="kk"></input> <script language="javascript"> // 这里用getElementsByTagName把所有的input对象取出来, //这是这个问题的关键性的地方,用ByTagName而不是ByName. var list = document.g

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

    本文实例讲述了Javascript控制input输入时间格式的方法.分享给大家供大家参考.具体分析如下: 之前做了一个Javascript控制时间格式的输入,主要用到了keydown和keyup两个事件,但感觉写的很复杂而且还有bug. 今日了解了一下keypress事件与keydown和keyup的区别.大致如下(目前只了解这么多): keydown:按键按下的时候触发,通过event可以获取到keyCode,可以获取到文本框输入之前的值: keyup:按键弹出(松开)时触发,通过event可

  • python3.4控制用户输入与输出的方法

    一.输入 1.函数格式:input() 2.函数功能:接受一个标准输入数据,返回string类型.ctrl+z结束输入. 3.实例: 默认input():等待一个任意字符的输入 str=input('input a string:\n'):接受输入数据作为string类型传给str,\n为提示信息换行. 4.接受多个数据输入,使用eval()函数,间隔符必须是逗号 >>> lines ['', '', '', '84', '2', '3', ''] >>> a,b,c=

  • javascript控制层显示或隐藏的方法

    本文实例讲述了javascript控制层显示或隐藏的方法.分享给大家供大家参考.具体实现方法如下: <html> <head> <title>中国风</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> </head> <script language="JavaScript&qu

  • javascript简单判断输入内容是否合法的方法

    本文实例讲述了javascript简单判断输入内容是否合法的方法.分享给大家供大家参考,具体如下: 关于检测用户输入的内容是否有非法的字符检测实现思路 1.定义合法的字符串(源字符串) 2.获取用户输入的内容 3.循环的取出用户输入的每一个字符,去源字符串中查找   1).查找到了,返回字符串查找的位置   2).没有找到返回-1,我们正好利用-1检测用户输入的内容是否合法 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//

  • php输出指定时间以前时间格式的方法

    本文实例讲述了php输出指定时间以前时间格式的方法.分享给大家供大家参考.具体分析如下: 比如说你需要在php中输出3天前,20分钟以前,可以参考下面的代码 function ago($time) { $time = strtotime($time); $delta = time() - $time; if ($delta < 60) { return 'less than a minute ago.'; } else if ($delta < 120) { return 'about a m

  • vue将时间戳转换成自定义时间格式的方法

    1.首先建立一个date.js文件,写入如下代码: export function formatDate (date, fmt) { if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)); } let o = { 'M+': date.getMonth() + 1, 'd+': date.getDate(), 'h+': date.g

  • android 默认时间格式修改方法

    在android使用中,遇到修改默认时间格式时,总是束手无策,本文将以此问题提供解决方案,需要了解的朋友可以参考下 语言为英语时,默认的时间格式为mm/DD/yyyy,请问怎么将默认时间格式修改为:DD/mm/yyyy,不知道是在framework层给初始化的还是编译的时候给的初始值,哪位大侠知道怎么该? 1.修改文件alps\frameworks\base\packages\SettingsProvider\res\values\defaults.xml 增加代码<string name=&quo

  • Python 如何优雅的将数字转化为时间格式的方法

    将数字转化成时间格式 from dateutil.parser import parse a=20170825 b=str(a) c=parse(b) print(c) 2017-08-25 00:00:00 将时间按照天排列,转化为一个数字,用来做时间序列分析 from matplotlib.pylab import date2num e = date2num(c) e Out[30]: 736566.0 将时间转化为时间戳 d=str(c) d Out[25]: '2017-08-25 00

  • javascript 控制input只允许输入的各种指定内容

    1.只允许输入数字 <input name="username" type="text" onkeyup="value=this.value.replace(/\D+/g,'')"> 2.只允许输入英文字母.数字和下划线(以下二种方法实现) <input name="username" type="text" style="ime-mode:disabled">

  • js控制input输入字符解析

    ENTER键可以让光标移到下一个输入框 <input onkeydown="if(event.keyCode==13)event.keyCode=9" > 只能是中文<input onkeyup="value=value.replace(/[ -~]/g,'')" onkeydown="if(event.keyCode==13)event.keyCode=9"> 屏蔽输入法<input style="ime

随机推荐