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取消文本选定的实现代码
Nov 14 Javascript
Js参数值中含有单引号或双引号问题的解决方法
Nov 06 Javascript
javascript中Date对象的getDay方法使用指南
Dec 22 Javascript
jQuery中first()方法用法实例
Jan 06 Javascript
Javascript常用小技巧汇总
Jun 24 Javascript
javascript设计简单的秒表计时器
Sep 05 Javascript
Node.js实现数据推送
Apr 14 Javascript
基于js中的原型、继承的一些想法
Aug 10 Javascript
给easyui datebox扩展一个清空的实例
Nov 09 Javascript
canvas简单快速的实现知乎登录页背景效果
May 08 Javascript
通过函数作用域和块级作用域看javascript的作用域链
Aug 05 Javascript
KOA+egg.js集成kafka消息队列的示例
Nov 09 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
超级简单的发送邮件程序
2006/10/09 PHP
PHP 和 MySQL 开发的 8 个技巧
2007/01/02 PHP
php curl模拟post请求和提交多维数组的示例代码
2015/11/19 PHP
php 解决扫描二维码下载跳转问题
2017/01/13 PHP
Yii框架函数简单用法分析
2019/09/09 PHP
Yii使用DbTarget实现日志功能的示例代码
2020/07/21 PHP
解决jquery .ajax 在IE下卡死问题的解决方法
2009/10/26 Javascript
通过js动态操作table(新增,删除相关列信息)
2012/05/23 Javascript
模拟电子签章盖章效果的jQuery插件源码
2013/06/24 Javascript
js创建元素(节点)示例
2014/01/02 Javascript
Node.js入门教程:在windows和Linux上安装配置Node.js图文教程
2014/08/14 Javascript
js封装可使用的构造函数继承用法分析
2015/01/28 Javascript
js获取当前日期时间及其它日期操作汇总
2016/03/08 Javascript
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
2017/03/24 jQuery
vue父组件向子组件(props)传递数据的方法
2018/01/02 Javascript
Angular6笔记之封装http的示例代码
2018/07/27 Javascript
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解
2018/09/21 Javascript
Angular6 Filter实现页面搜索的示例代码
2018/12/02 Javascript
layui自己添加图片按钮并点击跳转页面的例子
2019/09/14 Javascript
解决vue页面渲染但dom没渲染的操作
2020/07/27 Javascript
Python使用pyodbc访问数据库操作方法详解
2018/07/05 Python
Python通过TensorFlow卷积神经网络实现猫狗识别
2019/03/14 Python
用pycharm开发django项目示例代码
2019/06/13 Python
wxPython:python首选的GUI库实例分享
2019/10/05 Python
python无序链表删除重复项的方法
2020/01/17 Python
DAWGS鞋官方网站:鞋,凉鞋,靴子
2016/10/04 全球购物
韩国江南富人区高端时尚百货商场:Galleria(格乐丽雅)
2018/03/27 全球购物
优瑞自动咖啡机官网:Jura
2018/09/29 全球购物
C#面试常见问题
2013/02/25 面试题
2014年公司迎新年活动方案
2014/02/24 职场文书
鲁迅故居导游词
2015/02/05 职场文书
关于法制教育的宣传语
2015/07/13 职场文书
2019年大学生职业生涯规划书最新范文
2019/03/25 职场文书
html+css合并表格边框的示例代码
2021/03/31 HTML / CSS
分享五个Node.js开发的优秀实践 
2022/04/07 NodeJs
css3手动实现pc端横向滚动
2022/06/21 HTML / CSS