js 金额文本框实现代码


Posted in Javascript onFebruary 14, 2012

案例1:回车实现Tab跳转。
响应文本框的onKeyDown事件,window.event.keyCode获得用户点击的keyCode。
(*)keyCode和ASCII不是完全一致,主键盘的1和小键盘的1的ASCII一样,但是keyCode不一样。回车的keyCode为 13,Tab的keyCode为9。
<body onkeydown="if(window.event.keyCode==13){window.event.keyCode=9;}">
只有少数的键才能被替换,大部分是不行的,有权限问题。
键盘码与ASCII码不一样。
keyCode
8:退格键
46:delete
37-40: 方向键
48-57:小键盘区的数字
96-105:主键盘区的数字
110、190:小键盘区和主键盘区的小数点
189、109:小键盘区和主键盘区的负号
13:回车
9: Tab 就是那个把焦点移到下一个文本框的东东。
案例2:金额文本框
财务相关系统中涉及到金额的文本框有如下要求:
进入金额文本文本框不使用中文输入法
不能输入非数字
焦点在文本框中时文本框左对齐;焦点离开文本框时文本框右对齐,显示千分位
禁用输入法:style=“ime-mode:disabled” //兼容FF、IE,不兼容Chrome
禁 止键入非法值,只有这些才能被键入(k == 9) || (k == 13) || (k==46)||(k==8)||(k==189)||(k==109)||(k==190)||(k==110)|| (k>=48 && k<=57)||(k>=96 && k<=105)||(k>=37 && k<=40)。 onkeydown="return numonKeyDown()" 不要写成onkeydown="numonKeyDown()" 区分事件响应函数和事件响应函数调用的函数。
禁止粘贴(伟大的 Tester),<input onpaste=“return false;” ,太暴力,应该只是禁止粘贴非法值。在onpaste中通过clipboardData.getData(‘Text')取到粘贴板中的值,然后遍历每个 字符,看是否是合法的值,如果全部是合法值才允许粘贴,只要有一个非法值就禁止粘贴。charAt、charCodeAt(查字符集.doc)
焦点在的时候左对齐没有千分位,焦点不在时右对齐千分位。this.style.textAlign='right'
添加千分位的方法,见备注(*)
========补充知识==================
(?=exp)匹配exp前面的位置
(?=exp) 也叫零宽度正预测先行断言,它断言自身出现的位置的后面能匹配表达式exp。比如\b\w+(?=ing\b),匹配以ing结尾的单词的前面部分(除了 ing以外的部分),如查找I'm singing while you're dancing.时,它会匹配sing和danc。
===============================

function f(){ 
var txts=document.getElementsByTagName('input'); 
for(var i=0;i<txts.length;i++){ 
//回车转换为tab 
txts[i].onkeydown=function(){ 
if(window.event.keyCode==13){ 
window.event.keyCode=9; 
} 
} 
txts[i].onpaste=function(){ 
var usrInput=clipboardData.getData('Text'); 
var k; 
for(var i=0;i<usrInput.length;i++){ 
k=usrInput.charCodeAt(i); 
//只能黏贴.或0-9的数字,参考ASCII字符集。 
if((k==46) ||(k>=48 && k<=56)){ 
}else{ 
return false; 
} 
} 
} 
} 
}

千分位(练习代码):
function commafy(n) 
{ 
var re=/\d{1,3}(?=(\d{3})+$)/g; //必须是以\d{3}结尾,前面必须是1-3个数字,但替换的时候,不包含结尾的\d{3}个数字。 var n1=n.replace(/^(\d+)((\.\d+)?)$/,function(s,s1,s2){return s1.replace(re,“$&,”)+s2;}); 
  return n1; 
} 
function addQianFenWei(txtBox) 
{ 
txtBox.value=commafy(txtBox.value); 
} 
function removeQianFenWei(txtBox) 
{ 
txtBox.value=txtBox.value.replace(/,/g,"");//如果是replace(',','')是只替换第一个 
}

<script type="text/javascript"> 
function commafy(n) 
{ 
var re=/\d{1,3}(?=(\d{3})+$)/g; //匹配1到3个数字后面跟3个数字,但不含最后的3个数字。 
var n1=n.replace(/^(\d+)((\.\d+)?)$/,function(s,s1,s2){return s1.replace(re,"$&,")+s2;}); 
return n1; 
} 
function setQFW(){ 
var objTxt=document.getElementById('txtqfw'); 
var r=''; 
for(var i=objTxt.value.length-1;i>=0;i--){ 
if(i%3==0){ 
r+=objTxt.value.charAt(i)+','; 
}else{ 
r+=objTxt.value.charAt(i); 
} 
} 
 objTxt.value=r; 
//objTxt.value=commafy(objTxt.value); 
} 
</script>
Javascript 相关文章推荐
jquery 实现的全选和反选
Apr 15 Javascript
Firefox+FireBug使JQuery的学习更加轻松愉快
Jan 01 Javascript
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
Nov 28 Javascript
关于JavaScript中的关联数组分析
Apr 09 Javascript
javascript实现复制与粘贴操作实例
Oct 16 Javascript
jQuery点击改变class并toggle及toggleClass()方法定义用法
Dec 11 Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
Jul 12 Javascript
node文件批量重命名的方法示例
Oct 23 Javascript
angularjs实现的购物金额计算工具示例
May 08 Javascript
微信小程序scroll-view实现字幕滚动
Jul 14 Javascript
Vue全局分页组件的实现代码
Aug 10 Javascript
vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
Apr 08 Javascript
jQuery UI Autocomplete 体验分享
Feb 14 #Javascript
JavaScript/jQuery 表单美化插件小结
Feb 14 #Javascript
Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试
Feb 13 #Javascript
情人节之礼 js项链效果
Feb 13 #Javascript
jQuery.getScript加载同域JS的代码
Feb 13 #Javascript
理解JavaScript的prototype属性
Feb 11 #Javascript
情人节专属 纯js脚本1k大小的3D玫瑰效果
Feb 11 #Javascript
You might like
大师制作的中短波矿石收音机
2020/04/02 无线电
ThinkPHP3.1新特性之对页面压缩输出的支持
2014/06/19 PHP
ThinkPHP采用GET方式获取中文参数查询无结果的解决方法
2014/06/26 PHP
PHP中通过fopen()函数访问远程文件示例
2014/11/18 PHP
PHP随机生成中文段落示例【测试网站内容时使用】
2020/04/26 PHP
如何快速的呈现我们的网页的技巧整理
2007/07/01 Javascript
php gethostbyname获取域名ip地址函数详解
2010/01/24 Javascript
js实现的日期操作类DateTime函数代码
2010/03/16 Javascript
javascript中的delete使用详解
2013/04/11 Javascript
js倒计时小程序
2013/11/05 Javascript
基于百度地图实现产品销售的单位位置查看功能设计与实现
2016/10/21 Javascript
使用 bootstrap modal遇到的问题小结
2016/11/09 Javascript
js实现右键菜单功能
2016/11/28 Javascript
Vue2学习笔记之请求数据交互vue-resource
2017/02/23 Javascript
微信小程序使用wxParse解析html的实现示例
2018/08/30 Javascript
在vue中使用express-mock搭建mock服务的方法
2018/11/07 Javascript
微信小程序云开发之使用云函数
2019/05/17 Javascript
[01:03:38]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS CIS
2014/05/22 DOTA
pycharm 使用心得(四)显示行号
2014/06/05 Python
Python简单读写Xls格式文档的方法示例
2018/08/17 Python
Python 输出时去掉列表元组外面的方括号与圆括号的方法
2018/12/24 Python
Python pandas用法最全整理
2019/08/04 Python
使用Python函数进行模块化的实现
2019/11/15 Python
Python 实现自动获取种子磁力链接方式
2020/01/16 Python
使用Python中tkinter库简单gui界面制作及打包成exe的操作方法(二)
2020/10/12 Python
Python远程linux执行命令实现
2020/11/11 Python
Python3.9.1中使用match方法详解
2021/02/08 Python
对pytorch中x = x.view(x.size(0), -1) 的理解说明
2021/03/03 Python
以设计师精品品质提供快速时尚:PopJulia
2018/01/09 全球购物
教师实习自我鉴定
2013/12/11 职场文书
网络研修随笔感言
2014/02/17 职场文书
技术入股合作协议书
2014/10/07 职场文书
机动车交通事故协议书
2015/01/29 职场文书
违反纪律检讨书范文
2015/05/07 职场文书
python 开心网和豆瓣日记爬取的小爬虫
2021/05/29 Python
Golang 链表的学习和使用
2022/04/19 Golang