input text控件的onkeydown、onKeyPress、onkeyup事件的区别
2014-02-19 11:14
501 查看
input text输入框的这三个键盘响应事件看似是差不多的,实际上他们的执行事件还是有区别的,经过了半天的各种尝试(这里实际上就是想做一个能将金钱数额利用js转换成为大写的功能),遇到的问题就是每次都是无法在第一次就获取input的value,一开始被迫使用了onblur和onchange。
但是这样用户体验太差了,所以我就测试题目上三种的不同,首先down这个是按下后就相应了,基本上比较适合做游戏的上下左右。
第二种press,这个是按下并松开后相应,这里需要提示,利用这个事件,在最开始获取到的input的值是空,因为数值还没有来得及写入input。
第三种up,这个是相应最好的,也就是松开后,值写入到了input然后执行,也就是我所需要的。
这里分享下js代码,也是网上参考的不过写的真的不错各种情况
引用来自:点击打开链接
JS实现数字转换为货币汉字大写数字的方法详解
-------------------源码解析---------------------------------
function conver(num)
{
var AA = new Array("零","壹","贰","叁","肆","伍","陆","柒","捌","玖"); ////先创建一个数组放入是个大写数字
var BB = new Array("","拾","佰","仟","萬","億","圆",""); ////在将圆以上单位放入一个数组中
var CC = new Array("角", "分", "厘"); ///将圆以下单位放入一个数组中
var a = (""+num).replace(/(^0*)/g, "").split("."), k = 0, re = ""; //两个“/###/”之间定义了正则表达式
//以若干个0开始的数字,前面的0全部以空替换。如何00023就被转换为23,之后再以"."分割,所以这里的a是一个数组元素
//在定义两个元素,一个 k 一个是 re。
for(var i=a[0].length-1; i>=0; i--) /////这里是转换整数的情况
{
switch(k) ///判断当k等于0/4/8的情况,
{
case 0 : re = BB[7] + re; break; ///当k等于0时,re就定于“”
case 4 : if(!new RegExp("0{4}\\d{"+ (a[0].length-i-1) +"}$").test(a[0])) ///RegExp是创建正则表达式的对象
//test 方法 返回一个 Boolean 值,它指出在被查找的字符串中是否存在模式。
//这个判断条件的意思就是判断这个RegExp对象在a[0]中是否出现过也就是“0{4}\d{4}”这个正则是否在a[0]中出现
//如果出现条件为假整个四位万位都为空,就不用写万位了。直接从亿到到千,如200002325就读二亿两千三百二十五
re = BB[4] + re; break; ///当k等于4时,re等于“万” 如果条件为真执行这条语句
case 8 : re = BB[5] + re; BB[7] = BB[5]; k = 0; break; ///判断如果超过亿就另说了!哇哈哈
}
if(k%4 == 2 && a[0].charAt(i)=="0" && a[0].charAt(i+2) != "0") re = AA[0] + re;
///当k除4余2和a[0]的第i个元素等于0还有a[0]的第i+2个元素不等于0同时成立时,re就等于AA[0]+re
if(a[0].charAt(i) != 0) re = AA[a[0].charAt(i)] + BB[k%4] + re; k++;
///如果a[0]第i个元素不等于0;就让re等于(数组AA下标等于a[0].charAt(i)的元素 + 数组BB[k%4]的元素 + re)然后让k++,
///*例如当输入 903205034.12 时,
///第一轮循环 i=8
switch(k)中k=0,先得到re="";
然后执行if(k%4 == 2 && a[0].charAt(i)=="0" && a[0].charAt(i+2) != "0")判断了条件为假跳过往下执行
执行 if(a[0].charAt(i) != 0) re = AA[a[0].charAt(i)] + BB[k%4] + re; k++; 判断条件为真执行if语句
得到AA[4] + BB[0%4] + ""; k=1;得到re="肆"
///第二轮循环 i=7
switch(k)中k=1,没有匹配的case;跳过switch往下执行
然后执行if(1%4 == 2 && a[0].charAt(7)=="0" && a[0].charAt(7+2) != "0")判断了条件为假跳过往下执行
执行 if(a[0].charAt(7) != 0) re = AA[a[0].charAt(7)] + BB[1%4] + re; k++; 判断条件为真执行if语句
得到AA[3] + BB[1] + "肆"; k=2;得到re="叁"+"拾"+"肆"
///第三轮循环 i=6
switch(2)没有匹配的case;跳过switch往下执行
然后执行if(2%4 == 2 && a[0].charAt(6)=="0" && a[0].charAt(6+2) != "0")判断了条件为真往下执行
re = AA[0] + "叁"+"拾"+"肆"; re="零" + "叁"+"拾"+"肆"
执行 if(a[0].charAt(6) != 0) re = AA[a[0].charAt(6)] + BB[2%4] + re; k++; 判断条件为假跳回
///第四轮循环 i=5
switch(3)没有匹配的case;跳过switch往下执行
然后执行if(3%4 == 2 && a[0].charAt(6)=="0" && a[0].charAt(6+2) != "0")判断了条件为假跳过往下执行
执行 if(a[0].charAt(5) != 0) re = AA[a[0].charAt(5)] + BB[3%4] + re; k++; 判断条件为真执行if语句
得到AA[5] + BB[3] + "叁"+"拾"+"肆"; k=4;得到re="伍"+"仟"+"零"+"叁"+"拾"+"肆"
///第五轮循环 i=4
switch(4)匹配的case=4;执行
然后执行if(3%4 == 2 && a[0].charAt(6)=="0" && a[0].charAt(6+2) != "0")判断了条件为假跳过往下执行
执行 if(a[0].charAt(5) != 0) re = AA[a[0].charAt(5)] + BB[3%4] + re; k++; 判断条件为真执行if语句
得到AA[5] + BB[3] + "叁"+"拾"+"肆"; k=4;得到re="伍"+"仟"+"零"+"叁"+"拾"+"肆"
以此类推..........最后得到re=镹亿零三百二十万五千零三十四*/
}
if(a.length>1) //加上小数部分(如果有小数部分)这个是转换小数点后面的几位
{
re += BB[6]; //镹亿零三百二十万五千零三十四+圆
for(var i=0; i<a[1].length; i++)
{
re += AA[a[1].charAt(i)] + CC[i];
if(i==2) break;
} ///循环结束后re=镹亿零三百二十万五千零三十四圆一角二分
if(a[1].charAt(0)=="0" && a[1].charAt(1)=="0")///这个if是判断如果没有角和分只有厘则忽略厘加上元整
{
re+="元整";
}
}
else ///如果不带小数也输出
{
re+="元整";
}
return re; //最后返回“镹亿零三百二十万五千零三十四圆一角二分元整”
}
然后我还加入了一些需要的方法:
判断了是否为空。
以上的注释写的很详细了,只要能了解正则表达式就能很好的了解作者是如何实现的。
正则参考:百度百科http://baike.baidu.com/link?url=sB0IGHHFr5SvoCmOmWxfkoTk9UvjLG50WQYv88Lw1SxhR01zWUDvXecWXVrmzHDt
其中需要的知识主要是
jquery
javascript
正则表达式符号含义
其中输入框限制只能输入数字和小数点:
<input onkeypress="return (/[/d.]/.test(String.fromCharCode(event.keyCode)))" style="ime-mode:Disabled" />
参考来自
不能输入中文
<input type="text" name="textfield" onkeyup="this.value=this.value.replace(/[^/da-z_]/ig,'');"/>
只能输入 数字和下划线
<input onkeypress="return (/[/d_]/.test(String.fromCharCode(event.keyCode)))" style="ime-mode:Disabled" />
只能输入 数字和小数点
<input onkeypress="return (/[/d.]/.test(String.fromCharCode(event.keyCode)))" style="ime-mode:Disabled" />
只允许输入汉字</br>
<input name="username" type="text" onkeyup="value=value.replace(/[^/u4E00-/u9FA5]/g,'')">
其一,只允许输入数字和小数点。
<input onKeypress="return (/[/d.]/.test(String.fromCharCode(event.keyCode)))" style="ime-mode:Disabled">
其二,判断的更详细一些,甚至22..2这样不算数字也判断得出来
<script>
function check(){
if (isNaN(tt.value))
{alert("非法字符!");
tt.value="";}
}
</script>
<input type="text" name="tt" onkeyup="check();">
其三,只允许输入整数。其实也完全可以根据第三条来举一反三做一些限制。
<script language=javascript>
function onlyNum()
{
if(!(event.keyCode==46)&&!(event.keyCode==8)&&!(event.keyCode==37)&&!(event.keyCode==39))
if(!((event.keyCode>=48&&event.keyCode<=57)||(event.keyCode>=96&&event.keyCode<=105)))
event.returnValue=false;
}
</script><input onkeydown="onlyNum();" style="ime-mode:Disabled>
结语,其实
style="ime-mode:Disabled
这句是比较实用的。意为关闭输入法。省得有些人开着全角输入数字,结果输入不进去来找你哭天抹泪的,还怪你设计的不好。
只允许输入数字
<input name="username" type="text" onkeyup="value=this.value.replace(//D+/g,'')">
只允许输入英文字母、数字和下划线(以下二种方法实现)
<input name="username" type="text" style="ime-mode:disabled">
<input name="username" type="text" onkeyup="value=value.replace(/[^/w/.//]/ig,'')">
只允许输入英文字母、数字和&=@
<input name="username" type="text" onkeyup="value=value.replace(/[^/w=@&]|_/ig,'')">
只允许输入汉字
<input name="username" type="text" onkeyup="value=value.replace(/[^/u4E00-/u9FA5]/g,'')">
以上都极为常用,仅供参考
但是这样用户体验太差了,所以我就测试题目上三种的不同,首先down这个是按下后就相应了,基本上比较适合做游戏的上下左右。
第二种press,这个是按下并松开后相应,这里需要提示,利用这个事件,在最开始获取到的input的值是空,因为数值还没有来得及写入input。
第三种up,这个是相应最好的,也就是松开后,值写入到了input然后执行,也就是我所需要的。
这里分享下js代码,也是网上参考的不过写的真的不错各种情况
引用来自:点击打开链接
JS实现数字转换为货币汉字大写数字的方法详解
function Chinese(num){ if(!/^\d*(\.\d*)?$/.test(num))throw(new Error(-1, "Number is wrong!")); var AA = new Array("零","壹","贰","叁","肆","伍","陆","柒","捌","玖"); var BB = new Array("","拾","佰","仟","萬","億","圆",""); var CC = new Array("角", "分", "厘"); var a = (""+ num).replace(/(^0*)/g, "").split("."), k = 0, re = ""; for(var i=a[0].length-1; i>=0; i--){ switch(k){ case 0 : re = BB[7] + re; break; case 4 : if(!new RegExp("0{4}\\d{"+ (a[0].length-i-1) +"}$").test(a[0])) re = BB[4] + re; break; case 8 : re = BB[5] + re; BB[7] = BB[5]; k = 0; break; } if(k%4 == 2 && a[0].charAt(i)=="0" && a[0].charAt(i+2) != "0") re = AA[0] + re; if(a[0].charAt(i) != 0) re = AA[a[0].charAt(i)] + BB[k%4] + re; k++; } if(a.length>1){ re += BB[6]; for(var i=0; i<a[1].length; i++){ re += AA[a[1].charAt(i)] + CC[i]; if(i==2) break; } if(a[1].charAt(0)=="0" && a[1].charAt(1)=="0"){ re+="元整"; } }else{ re+="元整"; } return re; }
-------------------源码解析---------------------------------
function conver(num)
{
var AA = new Array("零","壹","贰","叁","肆","伍","陆","柒","捌","玖"); ////先创建一个数组放入是个大写数字
var BB = new Array("","拾","佰","仟","萬","億","圆",""); ////在将圆以上单位放入一个数组中
var CC = new Array("角", "分", "厘"); ///将圆以下单位放入一个数组中
var a = (""+num).replace(/(^0*)/g, "").split("."), k = 0, re = ""; //两个“/###/”之间定义了正则表达式
//以若干个0开始的数字,前面的0全部以空替换。如何00023就被转换为23,之后再以"."分割,所以这里的a是一个数组元素
//在定义两个元素,一个 k 一个是 re。
for(var i=a[0].length-1; i>=0; i--) /////这里是转换整数的情况
{
switch(k) ///判断当k等于0/4/8的情况,
{
case 0 : re = BB[7] + re; break; ///当k等于0时,re就定于“”
case 4 : if(!new RegExp("0{4}\\d{"+ (a[0].length-i-1) +"}$").test(a[0])) ///RegExp是创建正则表达式的对象
//test 方法 返回一个 Boolean 值,它指出在被查找的字符串中是否存在模式。
//这个判断条件的意思就是判断这个RegExp对象在a[0]中是否出现过也就是“0{4}\d{4}”这个正则是否在a[0]中出现
//如果出现条件为假整个四位万位都为空,就不用写万位了。直接从亿到到千,如200002325就读二亿两千三百二十五
re = BB[4] + re; break; ///当k等于4时,re等于“万” 如果条件为真执行这条语句
case 8 : re = BB[5] + re; BB[7] = BB[5]; k = 0; break; ///判断如果超过亿就另说了!哇哈哈
}
if(k%4 == 2 && a[0].charAt(i)=="0" && a[0].charAt(i+2) != "0") re = AA[0] + re;
///当k除4余2和a[0]的第i个元素等于0还有a[0]的第i+2个元素不等于0同时成立时,re就等于AA[0]+re
if(a[0].charAt(i) != 0) re = AA[a[0].charAt(i)] + BB[k%4] + re; k++;
///如果a[0]第i个元素不等于0;就让re等于(数组AA下标等于a[0].charAt(i)的元素 + 数组BB[k%4]的元素 + re)然后让k++,
///*例如当输入 903205034.12 时,
///第一轮循环 i=8
switch(k)中k=0,先得到re="";
然后执行if(k%4 == 2 && a[0].charAt(i)=="0" && a[0].charAt(i+2) != "0")判断了条件为假跳过往下执行
执行 if(a[0].charAt(i) != 0) re = AA[a[0].charAt(i)] + BB[k%4] + re; k++; 判断条件为真执行if语句
得到AA[4] + BB[0%4] + ""; k=1;得到re="肆"
///第二轮循环 i=7
switch(k)中k=1,没有匹配的case;跳过switch往下执行
然后执行if(1%4 == 2 && a[0].charAt(7)=="0" && a[0].charAt(7+2) != "0")判断了条件为假跳过往下执行
执行 if(a[0].charAt(7) != 0) re = AA[a[0].charAt(7)] + BB[1%4] + re; k++; 判断条件为真执行if语句
得到AA[3] + BB[1] + "肆"; k=2;得到re="叁"+"拾"+"肆"
///第三轮循环 i=6
switch(2)没有匹配的case;跳过switch往下执行
然后执行if(2%4 == 2 && a[0].charAt(6)=="0" && a[0].charAt(6+2) != "0")判断了条件为真往下执行
re = AA[0] + "叁"+"拾"+"肆"; re="零" + "叁"+"拾"+"肆"
执行 if(a[0].charAt(6) != 0) re = AA[a[0].charAt(6)] + BB[2%4] + re; k++; 判断条件为假跳回
///第四轮循环 i=5
switch(3)没有匹配的case;跳过switch往下执行
然后执行if(3%4 == 2 && a[0].charAt(6)=="0" && a[0].charAt(6+2) != "0")判断了条件为假跳过往下执行
执行 if(a[0].charAt(5) != 0) re = AA[a[0].charAt(5)] + BB[3%4] + re; k++; 判断条件为真执行if语句
得到AA[5] + BB[3] + "叁"+"拾"+"肆"; k=4;得到re="伍"+"仟"+"零"+"叁"+"拾"+"肆"
///第五轮循环 i=4
switch(4)匹配的case=4;执行
然后执行if(3%4 == 2 && a[0].charAt(6)=="0" && a[0].charAt(6+2) != "0")判断了条件为假跳过往下执行
执行 if(a[0].charAt(5) != 0) re = AA[a[0].charAt(5)] + BB[3%4] + re; k++; 判断条件为真执行if语句
得到AA[5] + BB[3] + "叁"+"拾"+"肆"; k=4;得到re="伍"+"仟"+"零"+"叁"+"拾"+"肆"
以此类推..........最后得到re=镹亿零三百二十万五千零三十四*/
}
if(a.length>1) //加上小数部分(如果有小数部分)这个是转换小数点后面的几位
{
re += BB[6]; //镹亿零三百二十万五千零三十四+圆
for(var i=0; i<a[1].length; i++)
{
re += AA[a[1].charAt(i)] + CC[i];
if(i==2) break;
} ///循环结束后re=镹亿零三百二十万五千零三十四圆一角二分
if(a[1].charAt(0)=="0" && a[1].charAt(1)=="0")///这个if是判断如果没有角和分只有厘则忽略厘加上元整
{
re+="元整";
}
}
else ///如果不带小数也输出
{
re+="元整";
}
return re; //最后返回“镹亿零三百二十万五千零三十四圆一角二分元整”
}
然后我还加入了一些需要的方法:
判断了是否为空。
以上的注释写的很详细了,只要能了解正则表达式就能很好的了解作者是如何实现的。
正则参考:百度百科http://baike.baidu.com/link?url=sB0IGHHFr5SvoCmOmWxfkoTk9UvjLG50WQYv88Lw1SxhR01zWUDvXecWXVrmzHDt
其中需要的知识主要是
jquery
javascript
正则表达式符号含义
其中输入框限制只能输入数字和小数点:
<input onkeypress="return (/[/d.]/.test(String.fromCharCode(event.keyCode)))" style="ime-mode:Disabled" />
参考来自
不能输入中文
<input type="text" name="textfield" onkeyup="this.value=this.value.replace(/[^/da-z_]/ig,'');"/>
只能输入 数字和下划线
<input onkeypress="return (/[/d_]/.test(String.fromCharCode(event.keyCode)))" style="ime-mode:Disabled" />
只能输入 数字和小数点
<input onkeypress="return (/[/d.]/.test(String.fromCharCode(event.keyCode)))" style="ime-mode:Disabled" />
只允许输入汉字</br>
<input name="username" type="text" onkeyup="value=value.replace(/[^/u4E00-/u9FA5]/g,'')">
其一,只允许输入数字和小数点。
<input onKeypress="return (/[/d.]/.test(String.fromCharCode(event.keyCode)))" style="ime-mode:Disabled">
其二,判断的更详细一些,甚至22..2这样不算数字也判断得出来
<script>
function check(){
if (isNaN(tt.value))
{alert("非法字符!");
tt.value="";}
}
</script>
<input type="text" name="tt" onkeyup="check();">
其三,只允许输入整数。其实也完全可以根据第三条来举一反三做一些限制。
<script language=javascript>
function onlyNum()
{
if(!(event.keyCode==46)&&!(event.keyCode==8)&&!(event.keyCode==37)&&!(event.keyCode==39))
if(!((event.keyCode>=48&&event.keyCode<=57)||(event.keyCode>=96&&event.keyCode<=105)))
event.returnValue=false;
}
</script><input onkeydown="onlyNum();" style="ime-mode:Disabled>
结语,其实
style="ime-mode:Disabled
这句是比较实用的。意为关闭输入法。省得有些人开着全角输入数字,结果输入不进去来找你哭天抹泪的,还怪你设计的不好。
只允许输入数字
<input name="username" type="text" onkeyup="value=this.value.replace(//D+/g,'')">
只允许输入英文字母、数字和下划线(以下二种方法实现)
<input name="username" type="text" style="ime-mode:disabled">
<input name="username" type="text" onkeyup="value=value.replace(/[^/w/.//]/ig,'')">
只允许输入英文字母、数字和&=@
<input name="username" type="text" onkeyup="value=value.replace(/[^/w=@&]|_/ig,'')">
只允许输入汉字
<input name="username" type="text" onkeyup="value=value.replace(/[^/u4E00-/u9FA5]/g,'')">
以上都极为常用,仅供参考
相关文章推荐
- onkeypress、onkeydown、onkeyup三事件的区别
- input输入框使用onkeypress实现回车启动按钮事件,另注:onkeypress、onkeyup与onkeydown的区别
- js中的键盘事件:onkeydown、onkeypress、onkeyup
- web前端 -- onkeydown、onkeypress、onkeyup、onblur、onchange、oninput、onpropertychange的区别
- onkeyup,onkeydown,onkeypress的区别
- 浅析OnKeyPress事件和OnKeyDown/OnKeyUp事件
- onkeyup,onkeydown和onkeypress的区别介绍
- onkeydown和onkeyup按键回车触发事件的区别
- 浅析OnKeyPress事件和OnKeyDown、OnKeyUp事件
- onkeypress,onkeyup,onkeydown的区别
- JS之onkeypress,onkeydown,onkeyup区别
- onkeypress,onkeydown,onkeyup区别 - lsgis2001的专栏
- onkeydown 、onkeypress 、onKeyUp 事件
- onkeyup,onkeydown和onkeypress的区别介绍
- onkeyup,onkeydown,onkeypress事件
- onkeypress 、onkeyup 与onkeydown三者之间的区别
- onkeyup,onkeydown和onkeypress的区别介绍
- onkeypress事件.onkeydown事件.onkeyup事件
- onkeypress,onkeydown,onkeyup区别
- onkeypress事件.onkeydown事件.onkeyup事件