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 相关文章推荐
Js放到HTML文件中的哪个位置有什么区别
Aug 21 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
Sep 01 Javascript
IE6 hack for js 集锦
Sep 23 Javascript
node.js中的url.resolve方法使用说明
Dec 10 Javascript
PHP结合jQuery实现的评论顶、踩功能
Jul 22 Javascript
原生JavaScript编写canvas版的连连看游戏
May 29 Javascript
ionic实现下拉刷新载入数据功能
May 11 Javascript
js中url对象化管理分析
Dec 29 Javascript
Vue-router 中hash模式和history模式的区别
Jul 24 Javascript
浅谈vue项目4rs vue-router上线后history模式遇到的坑
Sep 27 Javascript
微信小程序扫描二维码获取信息实例详解
May 07 Javascript
vue swipe自定义组件实现轮播效果
Jul 03 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
PHP 抽象方法与抽象类abstract关键字介绍及应用
2014/10/16 PHP
简单说说PHP优化那些事(经验分享)
2014/11/27 PHP
浅析php-fpm静态和动态执行方式的比较
2016/11/09 PHP
jquery 获取json数据实现代码
2009/04/27 Javascript
js中判断文本框是否为空的两种方法
2011/07/31 Javascript
使用jQuery+HttpHandler+xml模拟一个三级联动的例子
2011/08/09 Javascript
Jquery图形报表插件 jqplot简介及参数详解
2012/10/10 Javascript
javascript中[]和{}对象使用介绍
2013/03/20 Javascript
js 火狐下取本地路径实现思路
2013/04/02 Javascript
JS实现程序暂停与继续功能代码解读
2013/10/10 Javascript
javascript在子页面中函数无法调试问题解决方法
2014/01/17 Javascript
微信小程序 框架详解及实例应用
2016/09/26 Javascript
基于jQuery实现Tabs选项卡自定义插件
2016/11/21 Javascript
vue 组件高级用法实例详解
2018/04/11 Javascript
详解微信JS-SDK选择图片遇到的坑
2018/08/15 Javascript
antd组件Upload实现自己上传的实现示例
2018/12/18 Javascript
Vue动态路由缓存不相互影响的解决办法
2019/02/19 Javascript
JavaScript实现移动端弹窗后禁止滚动
2020/05/25 Javascript
JavaScript JSON使用原理及注意事项
2020/07/30 Javascript
分享8个JavaScript库可更好地处理本地存储
2020/10/12 Javascript
[03:12]2016完美“圣”典风云人物:单车专访
2016/12/02 DOTA
[01:18]PWL开团时刻DAY10——一拳超人
2020/11/11 DOTA
Python中条件选择和循环语句使用方法介绍
2013/03/13 Python
Python中使用Flask、MongoDB搭建简易图片服务器
2015/02/04 Python
Python使用ftplib实现简易FTP客户端的方法
2015/06/03 Python
python 2.7 检测一个网页是否能正常访问的方法
2018/12/26 Python
Django中FilePathField字段的用法
2020/05/21 Python
Python Django搭建网站流程图解
2020/06/13 Python
python输出国际象棋棋盘的实例分享
2020/11/26 Python
django项目中使用云片网发送短信验证码的实现
2021/01/19 Python
加利福尼亚州威尼斯的女性奢侈品设计师服装和概念店:Mona Moore
2018/09/13 全球购物
人民调解员培训方案
2014/06/05 职场文书
四风问题班子对照检查材料
2014/09/27 职场文书
领导班子在批评与自我批评座谈会上的发言
2014/09/28 职场文书
Mac环境Nginx配置和访问本地静态资源的实现
2021/03/31 Servers
PostgreSQL之连接失败的问题及解决
2023/05/08 PostgreSQL