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 使用手册(一)
Sep 23 Javascript
jquery限制输入字数,并提示剩余字数实现代码
Dec 24 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
Nov 29 Javascript
javascript中数组的concat()方法使用介绍
Dec 18 Javascript
jquery中one()方法的用法实例
Jan 16 Javascript
详解AngularJS中的filter过滤器用法
Jan 04 Javascript
深入分析Javascript事件代理
Jan 30 Javascript
bootstrap表格分页实例讲解
Dec 30 Javascript
使用vue中的v-for遍历二维数组的方法
Mar 07 Javascript
vue+vue-router转场动画的实例代码
Sep 01 Javascript
node实现生成带参数的小程序二维码并保存到本地功能示例
Dec 05 Javascript
Vue 进阶之路(三)
Apr 18 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
一个用php3编写的简单计数器
2006/10/09 PHP
网络资源
2006/10/09 PHP
php实现jQuery扩展函数
2009/10/30 PHP
无法在发生错误时创建会话,请检查 PHP 或网站服务器日志,并正确配置 PHP 安装最快的解决办法
2010/08/01 PHP
用PHP实现递归循环每一个目录
2010/08/08 PHP
PHP 5.3 下载时 VC9、VC6、Thread Safe、Non Thread Safe的区别分析
2011/03/28 PHP
MySQL连接数超过限制的解决方法
2011/07/17 PHP
php 实现简单的登录功能示例【基于thinkPHP框架】
2019/12/02 PHP
javascript json2 使用方法
2010/03/16 Javascript
JS与C#编码解码
2013/12/03 Javascript
Javascript 函数parseInt()转换时出现bug问题
2014/05/20 Javascript
js打开windows上的可执行文件示例
2014/05/27 Javascript
jQuery实现模拟marquee标签效果
2015/07/14 Javascript
jQuery实现鼠标选文字发新浪微博的方法
2016/04/02 Javascript
Jquery 自定义事件实现发布/订阅的简单实例
2016/06/12 Javascript
微信小程序之数据双向绑定与数据操作
2017/05/12 Javascript
移动端效果之IndexList详解
2017/10/20 Javascript
仿京东快报向上滚动的实例
2017/12/13 Javascript
解决低版本的浏览器不支持es6的import问题
2018/03/09 Javascript
vue实现打印功能的两种方法
2018/09/07 Javascript
webstorm+vue初始化项目的方法
2018/10/18 Javascript
关于React动态加载路由处理的相关问题
2019/01/07 Javascript
详解Python中 sys.argv[]的用法简明解释
2017/12/20 Python
Python实现时钟显示效果思路详解
2018/04/11 Python
windows下python安装pip图文教程
2018/05/25 Python
python多线程与多进程及其区别详解
2019/08/08 Python
使用Python爬取Json数据的示例代码
2020/12/07 Python
中东奢侈品购物网站:Ounass
2020/09/02 全球购物
大专自我鉴定范文
2013/10/23 职场文书
自愿解除劳动合同协议书
2014/09/11 职场文书
党员评议思想汇报
2014/10/08 职场文书
初中教师个人总结
2015/02/10 职场文书
Python 把两层列表展开平铺成一层(5种实现方式)
2021/04/07 Python
Oracle以逗号分隔的字符串拆分为多行数据实例详解
2021/07/16 Oracle
PHP遍历数组的6种方式总结
2021/11/17 PHP
分享MySQL常用 内核 Debug 几种常见方法
2022/03/17 MySQL