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自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
Mar 28 Javascript
动态加载外部javascript文件的函数代码分享
Jul 28 Javascript
js自定义事件及事件交互原理概述(一)
Feb 01 Javascript
JQuery插件jcarousellite的参数中文说明
May 11 Javascript
全面了解js中的script标签
Jul 04 Javascript
bootstrap daterangepicker汉化以及扩展功能
Jun 15 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
Jul 10 Javascript
JavaScript中EventLoop介绍
Jan 22 Javascript
layui从数据库中获取复选框的值并默认选中方法
Aug 15 Javascript
JavaScript数据结构之栈实例用法
Jan 18 Javascript
Vue项目中ESlint规范示例代码
Jul 04 Javascript
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 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
PHP生成UTF8文件的方法
2010/05/15 PHP
PHPMailer邮件发送的实现代码
2013/05/04 PHP
Windows中使用计划任务自动执行PHP程序实例
2014/05/09 PHP
学习php设计模式 php实现门面模式(Facade)
2015/12/07 PHP
简单谈谈PHP面向对象之标识对象
2017/06/27 PHP
JavaScript中的bold()方法使用详解
2015/06/08 Javascript
json对象转为字符串,当做参数传递时加密解密的实现方法
2016/06/29 Javascript
移动端js触摸事件详解
2016/09/18 Javascript
在Vue组件中使用 TypeScript的方法
2018/02/28 Javascript
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
2018/09/14 Javascript
vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
2018/11/29 Javascript
Vue组件内部实现一个双向数据绑定的实例代码
2019/04/04 Javascript
Vue动态修改网页标题的方法及遇到问题
2019/06/09 Javascript
JavaScript判断数据类型有几种方法及区别介绍
2020/09/02 Javascript
Python的Flask框架中web表单的教程
2015/04/20 Python
python使用super()出现错误解决办法
2017/08/14 Python
python定时利用QQ邮件发送天气预报的实例
2017/11/17 Python
Python3.5字符串常用操作实例详解
2019/05/01 Python
python3.6环境安装+pip环境配置教程图文详解
2019/06/20 Python
python基于event实现线程间通信控制
2020/01/13 Python
如何用Python绘制3D柱形图
2020/09/16 Python
详解python使用金山词霸的翻译功能(调试工具断点的使用)
2021/01/07 Python
Numpy中的数组搜索中np.where方法详细介绍
2021/01/08 Python
前端隐藏出边界内容的实现方法
2016/04/14 HTML / CSS
意大利在线购买隐形眼镜网站:VisionDirect.it
2019/03/18 全球购物
回门宴答谢词
2014/01/13 职场文书
大二学生学习个人自我评价
2014/01/19 职场文书
保险专业自荐信范文
2014/02/20 职场文书
中秋晚会策划方案
2014/06/12 职场文书
社区务虚会发言材料
2014/10/20 职场文书
师德师风整改措施
2014/10/24 职场文书
婚礼双方父亲致辞
2015/07/27 职场文书
入党心得体会
2019/06/20 职场文书
基于CSS3画一个iPhone
2021/04/21 HTML / CSS
Python Pandas pandas.read_sql函数实例用法
2021/06/21 Python
python中sqllite插入numpy数组到数据库的实现方法
2021/06/21 Python