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 相关文章推荐
用javascript作一个通用向导说明
Aug 30 Javascript
javascript中[]和{}对象使用介绍
Mar 20 Javascript
改变隐藏的input中value的值代码
Dec 30 Javascript
使用js完成节点的增删改复制等的操作
Jan 02 Javascript
jQuery .tmpl() 用法示例介绍
Aug 21 Javascript
Javascript的表单验证-揭开正则表达式的面纱
Mar 18 Javascript
js实现千分符和保留几位小数的简单实例
Aug 01 Javascript
利用D3.js实现最简单的柱状图示例代码
Dec 09 Javascript
jQuery日程管理插件fullcalendar使用详解
Jan 07 Javascript
详解Vue.directive 自定义指令
Mar 27 Javascript
什么时候不能在 Node.js 中使用 Lock Files
Jun 24 Javascript
在vue中使用echars实现上浮与下钻效果
Nov 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
解析如何修改phpmyadmin中的默认登陆超时时间
2013/06/25 PHP
PHP内置加密函数详解
2016/11/20 PHP
PHP基于SMTP协议实现邮件发送实例代码
2017/04/27 PHP
一些常用的Javascript函数
2006/12/22 Javascript
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法
2013/03/05 Javascript
jQuery如何将选中的对象转化为原始的DOM对象
2014/06/09 Javascript
jQuery往textarea中光标所在位置插入文本的方法
2015/06/26 Javascript
理解javascript中的原型和原型链
2015/07/30 Javascript
swtich/if...else的替代语句
2015/08/16 Javascript
JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)
2016/02/26 Javascript
深入浅析knockout源码分析之订阅
2016/07/12 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
2016/07/14 Javascript
js动态添加的DIV中的onclick事件简单实例
2016/07/25 Javascript
bootstrap的3级菜单样式,支持母版页保留打开状态实现方法
2016/11/10 Javascript
用原生 JS 实现 innerHTML 功能实例详解
2019/04/03 Javascript
在vue项目实现一个ctrl+f的搜索功能
2020/02/28 Javascript
echarts饼图各个板块之间的空隙如何实现
2020/12/01 Javascript
echarts柱状图背景重叠组合而非并列的实现代码
2020/12/10 Javascript
使用Python下载歌词并嵌入歌曲文件中的实现代码
2015/11/13 Python
matplotlib绘图实例演示标记路径
2018/01/23 Python
Odoo中如何生成唯一不重复的序列号详解
2018/02/10 Python
python实现简单登陆流程的方法
2018/04/22 Python
python的concat等多种用法详解
2018/11/28 Python
tensorboard显示空白的解决
2020/02/15 Python
Python安装与卸载流程详细步骤(图解)
2020/02/20 Python
Python2手动安装更新pip过程实例解析
2020/07/16 Python
python 获取字典键值对的实现
2020/11/12 Python
python生成word合同的实例方法
2021/01/12 Python
伦敦的高级牛仔布专家:Trilogy
2018/08/06 全球购物
Coggles美国/加拿大:高级国际时装零售商
2018/10/23 全球购物
英国男女豪华配饰和礼品网站:Black.co.uk
2020/02/28 全球购物
会计电算化专业毕业生推荐信
2013/12/24 职场文书
员工试用期考核自我鉴定
2014/04/13 职场文书
物理系毕业生自荐书
2014/06/13 职场文书
国家领导干部党的群众路线教育实践活动批评与自我批评材料
2014/09/23 职场文书
Alexa停服!网站排名将何去何从?目前还没有替代品。
2022/04/15 杂记