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+CSS 图片等比缩小并垂直居中实现代码
Dec 01 Javascript
js本身的局限性 别让javascript做太多事
Mar 23 Javascript
Egret引擎开发指南之视觉编程
Sep 03 Javascript
JS模仿腾讯图片站的图片翻页按钮效果完整实例
Jun 21 Javascript
jquery,js简单实现类似Angular.js双向绑定
Jan 13 Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
Apr 18 Javascript
利用vue和element-ui设置表格内容分页的实例
Mar 02 Javascript
Vue中mintui的field实现blur和focus事件的方法
Aug 25 Javascript
js实现下拉框二级联动
Dec 04 Javascript
JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析
May 22 Javascript
Jquery实现获取子元素的方法分析
Aug 24 jQuery
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 Vue.js
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
使用TinyButStrong模板引擎来做WEB开发
2007/03/16 PHP
Yii实现Command任务处理的方法详解
2016/07/14 PHP
Yii框架实现记录日志到自定义文件的方法
2017/05/23 PHP
javawscript 三级菜单的实现原理
2009/07/01 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件
2010/08/24 Javascript
Jquery同辈元素选中/未选中效果的实例代码
2013/08/01 Javascript
js判断当前浏览器类型,判断IE浏览器方法
2014/06/02 Javascript
Yii2使用Bootbox插件实现自定义弹窗
2015/04/02 Javascript
JavaScript检查数字是否为整数或浮点数的方法
2015/06/09 Javascript
浅谈JavaScript中setInterval和setTimeout的使用问题
2015/08/01 Javascript
js实现select选择框效果及美化
2016/08/19 Javascript
jQuery设置Easyui校验规则(推荐)
2016/11/21 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
2017/02/18 Javascript
Node.js+Express+MySql实现用户登录注册功能
2017/07/10 Javascript
Vue-Router实现组件间跳转的三种方法
2017/11/07 Javascript
基于zTree树形菜单的使用实例
2017/12/25 Javascript
解决vue select当前value没有更新到vue对象属性的问题
2018/08/30 Javascript
javascript实现小型区块链功能
2019/04/03 Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
2020/04/21 Javascript
js实现自定义右键菜单
2020/05/18 Javascript
[04:17]DOTA2完美盛典,rOtk、BurNIng携手巴图演唱《倔强》
2017/11/28 DOTA
Python提取Linux内核源代码的目录结构实现方法
2016/06/24 Python
python中通过预先编译正则表达式提高效率
2017/09/25 Python
详解appium+python 启动一个app步骤
2017/12/20 Python
Python3.5装饰器典型案例分析
2019/04/30 Python
python将字符串list写入excel和txt的实例
2019/07/20 Python
python 串口读取+存储+输出处理实例
2019/12/26 Python
通过实例解析python subprocess模块原理及用法
2020/10/10 Python
AJAX的全称是什么
2012/11/06 面试题
历史专业学生的自我评价
2014/02/28 职场文书
人力资源管理专业应届生求职信
2014/04/24 职场文书
人事经理岗位职责
2014/04/28 职场文书
学生检讨书怎么写?
2014/10/10 职场文书
幼儿园中班教育随笔
2015/08/14 职场文书
2016年庆“七一”主题党日活动总结
2016/04/05 职场文书
pandas求平均数和中位数的方法实例
2021/08/04 Python