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入门教程 Cookies
Jan 31 Javascript
WEB高性能开发之疯狂的HTML压缩
Jun 19 Javascript
JQUBar 基于JQUERY的柱状图插件
Nov 23 Javascript
基于JQuery的类似新浪微博展示信息效果的代码
Jul 23 Javascript
什么是json和jsonp,jQuery json实例详详细说明
Dec 11 Javascript
jquery拖拽效果完整实例(附demo源码下载)
Jan 14 Javascript
JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
Apr 05 Javascript
详解Javascript数据类型的转换规则
Dec 12 Javascript
VUE中使用Vue-resource完成交互
Jul 21 Javascript
node+express+ejs使用模版引擎做的一个示例demo
Sep 18 Javascript
JavaScript中click和onclick本质区别与用法分析
Jun 07 Javascript
Vue深入理解插槽slot的使用
Aug 05 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自动适应范围的分页代码
2008/08/05 PHP
php获取excel文件数据
2017/04/21 PHP
javascript不同类型数据之间的运算的转换方法
2014/02/13 Javascript
js判断滚动条是否已到页面最底部或顶部实例
2014/11/20 Javascript
谈谈impress.js初步理解
2015/09/09 Javascript
实例分析nodejs模块xml2js解析xml过程中遇到的坑
2017/03/18 NodeJs
详解Webpack DLL用法以及功能
2017/07/11 Javascript
使用vue如何构建一个自动建站项目
2018/02/05 Javascript
详解vue 数据传递的方法
2018/04/19 Javascript
vue中node_modules中第三方模块的修改使用详解
2019/05/31 Javascript
20道JS原理题助你面试一臂之力(必看)
2019/07/22 Javascript
vue+elementui 对话框取消 表单验证重置示例
2019/10/29 Javascript
npm qs模块使用详解
2020/02/07 Javascript
js编写简易的计算器
2020/07/29 Javascript
python中列表元素连接方法join用法实例
2015/04/07 Python
Pthon批量处理将pdb文件生成dssp文件
2015/06/21 Python
Python根据区号生成手机号码的方法
2015/07/08 Python
virtualenv实现多个版本Python共存
2017/08/21 Python
python实现简单五子棋游戏
2019/06/18 Python
实例详解Python模块decimal
2019/06/26 Python
Python爬虫 bilibili视频弹幕提取过程详解
2019/07/31 Python
Python figure参数及subplot子图绘制代码
2020/04/18 Python
在pycharm中关掉ipython console/PyDev操作
2020/06/09 Python
利用Python优雅的登录校园网
2020/10/21 Python
英国探险旅游专家:Explore
2018/12/20 全球购物
L*SPACE官网:比基尼、泳装和度假服装
2019/03/18 全球购物
个人对照检查材料
2014/02/12 职场文书
保护母亲河倡议书
2014/04/14 职场文书
大学生简短的自我评价
2014/09/12 职场文书
预备党员期盼十八届四中全会召开思想汇报
2014/10/17 职场文书
邀请函的格式
2015/01/30 职场文书
药店营业员岗位职责
2015/04/14 职场文书
网吧管理制度范本
2015/08/05 职场文书
Python实现8种常用抽样方法
2021/06/27 Python
教你一步步实现一个简易promise
2021/11/02 Javascript
HTML5中的DOCUMENT.VISIBILITYSTATE属性详解
2023/05/07 HTML / CSS