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下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
Oct 22 Javascript
js中的值类型和引用类型小结 文字说明与实例
Dec 12 Javascript
javascript打印html内容功能的方法示例
Nov 28 Javascript
js日期、星座的级联显示代码
Jan 23 Javascript
jquery 使用简明教程
Mar 05 Javascript
jquery图片倾斜层叠切换特效代码分享
Aug 27 Javascript
轻松学习Javascript闭包函数
Dec 15 Javascript
JavaScript实现复制或剪切内容到剪贴板功能的方法
May 23 Javascript
关于react-router/react-router-dom v4 history不能访问问题的解决
Jan 08 Javascript
详解微信小程序input标签正则初体验
Aug 18 Javascript
通过layer实现可输入的模态框的例子
Sep 27 Javascript
基于javascript实现移动端轮播图效果
Dec 21 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
Zend Framework框架路由机制代码分析
2016/03/22 PHP
php+javascript实现的动态显示服务器运行程序进度条功能示例
2017/08/07 PHP
yii 框架实现按天,月,年,自定义时间段统计数据的方法分析
2020/04/04 PHP
js window.event对象详尽解析
2009/02/17 Javascript
javascript smipleChart 简单图标类
2011/01/12 Javascript
js中判断用户输入的值是否为空的简单实例
2013/12/23 Javascript
JavaScript实现生成GUID(全局统一标识符)
2014/09/05 Javascript
js onmousewheel事件多次触发问题解决方法
2014/10/17 Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
2015/12/25 Javascript
javascript基本语法
2016/05/31 Javascript
对Angular.js Controller如何进行单元测试
2016/10/25 Javascript
js中编码函数:escape,encodeURI与encodeURIComponent详解
2017/03/21 Javascript
jQuery常见面试题之DOM操作详析
2017/07/05 jQuery
jQuery实现base64前台加密解密功能详解
2017/08/29 jQuery
javascript 面向对象实战思想分享
2017/09/07 Javascript
关于Webpack dev server热加载失败的解决方法
2018/02/22 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
2018/05/04 Javascript
JS浮点数运算结果不精确的Bug解决
2019/08/01 Javascript
JavaScript 作用域实例分析
2019/10/02 Javascript
Python set集合类型操作总结
2014/11/07 Python
Python supervisor强大的进程管理工具的使用
2019/04/24 Python
python 使用cycle构造无限循环迭代器
2020/12/02 Python
如何在Canvas中添加事件的方法示例
2019/05/21 HTML / CSS
TUMI香港官网:国际领先的行李箱、背囊品牌
2021/03/01 全球购物
大学生应聘自荐信
2013/10/11 职场文书
写好自荐信的要点
2013/11/06 职场文书
园林设计师自荐信
2013/11/18 职场文书
医药工作岗位求职信分享
2013/12/31 职场文书
文秘应聘自荐书范文
2014/02/18 职场文书
2014年学校国庆主题活动方案
2014/09/16 职场文书
婚庆答谢词
2015/01/04 职场文书
2015年学校财务工作总结
2015/05/19 职场文书
歼十出击观后感
2015/06/11 职场文书
Python代码风格与编程习惯重要吗?
2021/06/03 Python
springboot临时文件存储目录配置方式
2021/07/01 Java/Android