JS金额输入的处理

tfish2014 2010-12-30 06:56:22
我在text里要输入金额,格式是xx.xx,小数点后必须有两位,如果用户输入的不是数字,便不能显示,如果用户输入的是xx,则自动变成xx.00,如果用户输入的是xx.x则自动变马xx.x0
请指点下,谢谢了
...全文
1275 33 打赏 收藏 转发到动态 举报
写回复
用AI写文章
33 条回复
切换为时间正序
请发表友善的回复…
发表回复
d14967954 2012-02-24
  • 打赏
  • 举报
 回复
只有IE能行，其他浏览器一概不行
tfish2014 2011-01-11
  • 打赏
  • 举报
 回复
[Quote=引用 29 楼 zyzy15 的回复:]

改了改，好像解决了27楼的问题
还是得用onkeypress啊……
HTML code

<INPUT TYPE="text" style="ime-mode:disabled" onkeydown="if(event.repeat)event.returnValue=false;//屏蔽连按" onkeypress="initPrice(this)" onblur="checkinp(……
[/Quote]

可以说这已经是一个完美了 非常感谢！
zyzy15 2011-01-07
  • 打赏
  • 举报
 回复
[Quote=引用 27 楼 a365477312 的回复:]
我发现一个问题，只要你的一直按住某个非数字键那个也会显示。不会自动删除！
[/Quote]

一直按住，就没有onkeyup，就不执行函数了……
a365477312 2011-01-07
  • 打赏
  • 举报
 回复
[Quote=引用 29 楼 zyzy15 的回复:]

改了改，好像解决了27楼的问题
还是得用onkeypress啊……
HTML code

<INPUT TYPE="text" style="ime-mode:disabled" onkeydown="if(event.repeat)event.returnValue=false;//屏蔽连按" onkeypress="initPrice(this)" onblur="checkinp(……
[/Quote]

还有不支持火狐浏览器。
还有“CLinHF”的方法也不支持火狐浏览器。
哀 2011-01-07
  • 打赏
  • 举报
 回复
屏蔽一些键盘事件，判断一下"."后的长度是否为2，不足补0。
zyzy15 2011-01-07
  • 打赏
  • 举报
 回复
改了改，好像解决了27楼的问题
还是得用onkeypress啊……


 <INPUT TYPE="text" style="ime-mode:disabled" onkeydown="if(event.repeat)event.returnValue=false;//屏蔽连按" onkeypress="initPrice(this)" onblur="checkinp(this)">

  <SCRIPT LANGUAGE="JavaScript">

  <!--

	function initPrice(oInput){

		var num = oInput.value;

		/* 取光标位置 */

		var s = document.selection.createRange(); 

		var r = oInput.createTextRange();

		s.setEndPoint( "StartToStart",r);

		var curP = s.text.length;



		num = num.substring(0,curP) + String.fromCharCode(event.keyCode) + num.substring(curP);

		var reg = /^\-?([\d\,]*\.?\d{0,3}?)?$/;

		// 0~9:48~57; \,:44; \-:45; \.:46; 

		if ( event.keyCode<44 || event.keyCode>57 || event.keyCode==47 || !reg.test(num) ) {

			if (event.keyCode==46) curP = num.indexOf(".")+1;

			event.returnValue = false;

		}

		else {

			curP += 1;

			if (num=="-") return;

			if (/\.\d{3}$/.test(num)) num = num.substring(0,num.length-1);

			event.returnValue = false;

			num = num.replace(/,/g,"");

			num = parseFloat(num).toFixed(2);

			var re = /(-?\d+)(\d{3})/;

			while(re.test(num)){

			   num = num.replace(re,"$1,$2")

			}

			oInput.value=num;

			if(num.indexOf(".")>0 && curP <= num.indexOf(".") ) curP = num.indexOf(".");

		}

		//恢复光标位置

		r.moveStart( 'character',curP); 

		r.collapse(true); 

		r.select(); 

	}

	function checkinp(obj){

			var num = obj.value.replace(/,/g,"");

			num = parseFloat(num).toFixed(2);

			var re = /(-?\d+)(\d{3})/;

			while(re.test(num)){

			   num = num.replace(re,"$1,$2")

			}

			obj.value=num;

	}

  //-->

  </SCRIPT>
zyzy15 2011-01-06
  • 打赏
  • 举报
 回复
我也试试


 <INPUT TYPE="text" NAME="" onkeyup="checkinp(this)">

  <SCRIPT LANGUAGE="JavaScript">

  <!--

	function checkinp(oInput){

		var reg = /^\-?([\d\,]+\.?\d{0,2}?)?$/;

		var num = oInput.value;

		/* 取光标位置 */

		var s = document.selection.createRange(); 

		var r = oInput.createTextRange();

		s.setEndPoint( "StartToStart",r);

		var curP = s.text.length;

		if (!reg.test(num)) {

			if (curP <= num.indexOf(".")+1 || /\.(\D|\d\D)/.test(num)) {

				oInput.value = num.substring(0,curP-1) + num.substring(curP,num.length);

				if (curP != num.indexOf(".")+1) curP -= 1;

			}

			else oInput.value = num.substring(0,num.length-1);

		}

		else {

			if (oInput.value=="-") return;

			num = num.replace(/,/g,"");

			num = parseFloat(num).toFixed(2);

			var re = /(-?\d+)(\d{3})/;

			while(re.test(num)){

			   num = num.replace(re,"$1,$2")

			}

			oInput.value=num;

			if(curP <= num.indexOf(".") ) curP = num.indexOf(".");

		}

		//恢复光标位置

		r.moveStart( 'character',curP); 

		r.collapse(true); 

		r.select(); 

	}

  //-->

  </SCRIPT>
tfish2014 2011-01-06
  • 打赏
  • 举报
 回复
[Quote=引用 20 楼 clinhf 的回复:]
引用 15 楼 tangyu477 的回复:
……
非常感谢CLinHF，经过测试，有2点小小的瑕疵外，基本符合要求
1.负号只能第一个字母输入，用户如果输入到一半才发现应该是负数，则需要全部删除重新输入，对用户来说肯定会有点不满意的。
2.只有失去焦点的时候才进行小数的判断和补充，是否可以做到和千分位一样每一次按键都进行格式化并返回，光标默认在小数点前面，当按下小数点符号后输入的数字自动……
[/Quote]
非常感谢！期待最后一步完善！
a365477312 2011-01-06
  • 打赏
  • 举报
 回复
[Quote=引用 23 楼 zyzy15 的回复:]

我也试试
HTML code

<INPUT TYPE="text" NAME="" onkeyup="checkinp(this)">
<SCRIPT LANGUAGE="JavaScript">
<!--
function checkinp(oInput){
var reg = /^\-?([\d\,]+\.?\d{0,2}?)?$/;
……
[/Quote]

我发现一个问题，只要你的一直按住某个非数字键那个也会显示。不会自动删除！
zyzy15 2011-01-06
  • 打赏
  • 举报
 回复
[Quote=引用 25 楼 wwtbless 的回复:]
还是有小小的不足啊
[/Quote]
嗯，onkeyup会有闪烁
不想闪烁的话就得像12楼那样onkeypress，然后判断keycode……
wwtbless 2011-01-06
  • 打赏
  • 举报
 回复
[Quote=引用 23 楼 zyzy15 的回复:]

我也试试
HTML code

<INPUT TYPE="text" NAME="" onkeyup="checkinp(this)">
<SCRIPT LANGUAGE="JavaScript">
<!--
function checkinp(oInput){
var reg = /^\-?([\d\,]+\.?\d{0,2}?)?$/;
……
[/Quote]
还是有小小的不足啊。
CLinHF 2011-01-06
  • 打赏
  • 举报
 回复
[Quote=引用 23 楼 zyzy15 的回复:]
我也试试

HTML code

<INPUT TYPE="text" NAME="" onkeyup="checkinp(this)">
<SCRIPT LANGUAGE="JavaScript">
<!--
function checkinp(oInput){
var reg = /^\-?([\d\,]+\.?\d{0,2}?)?$/;
……
[/Quote]
这位同学写得太好了，比我的代码简洁了许多，学习了！
蚂蚁上树 2011-01-05
  • 打赏
  • 举报
 回复
^(\d+)([.]{1})(\d{1,2})$ 只能输入2位小数的小数
CLinHF 2011-01-05
  • 打赏
  • 举报
 回复
主要的修改是：添加了keyup函数，对输入后，负号的位置进行判断，并做出处理。
CLinHF 2011-01-05
  • 打赏
  • 举报
 回复
[Quote=引用 15 楼 tangyu477 的回复:]
……
非常感谢CLinHF，经过测试，有2点小小的瑕疵外，基本符合要求
1.负号只能第一个字母输入，用户如果输入到一半才发现应该是负数，则需要全部删除重新输入，对用户来说肯定会有点不满意的。
2.只有失去焦点的时候才进行小数的判断和补充，是否可以做到和千分位一样每一次按键都进行格式化并返回，光标默认在小数点前面，当按下小数点符号后输入的数字自动替换小数点后的数字。

===========================
（第二个只是我了解的最理想状态，很可能是因为控件的原因。第一个还是比较重要的，希望可以继续完善下）
[/Quote]
针对第一个Bug进行了修改，负号问题已解决，新代码如下：


<html>

<head>

<script language="javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js" ></script>

<script language="javascript">

$(document).ready(function(){

//千分位处理函数 

 var departNum = function(textVal,the_other){

   var the_array = [];

   var i = 0;

   the_array.push(textVal.slice(textVal.length-2,textVal.length));

   for(i=textVal.length-5;i>=0;i-=3){

     the_array.push(textVal.slice(i,i+3));

   }

   if(0-i<3){the_array.push(textVal.slice(0,3+i));}

   for(var k=the_array.length-1;k>=0;k--){

    the_other.push(the_array[k]);

   }

 }

//输入限制

 $("#textId").keypress(function(event){

   var current = $(this).val();

   if(event.keyCode&&(event.keyCode<45||(event.keyCode>45&&event.keyCode<48)||event.keyCode>57)){

      if(event.keyCode == 46&&!/\./.test(current)){

       if(!isNaN(parseInt($(this).val().replace(/,/,"")))){

        $(this).val(current+".");  

       }

       else{

        $(this).val($(this).val()+"0.");

       }

      }

    event.preventDefault();

   }

   else{

     if(event.keyCode == 45&&/-/.test(current)){event.preventDefault();}

     else if(event.keyCode != 45){

       if(!/\./.test(current)){

        var the_new = $(this).val().replace(/,/g,"");

        var theArray = [];

        var theFlag = "";

        if(/-/.test(current)){theFlag = the_new.slice(0,1);the_new = the_new.slice(1);}

        if(parseInt(the_new) >= 100){

          departNum(the_new,theArray);

          $(this).val(theFlag+theArray.join(","));

        }

       }

     }

   }

 })

.keyup(function(event){

   if(event.keyCode == 109&&$(this).val().slice(0,1) != "-"){

      var the_Real = $(this).val();

      $(this).val(the_Real.replace(/-/,""));

   }

 })

.blur(function(){

    var the_Val = $(this).val().replace(/,/g,"");

    if(!isNaN(parseFloat(the_Val))){

    if(!/\./.test(the_Val)){

      var theArray = [];

      var theFlag = "";

      var the_one = the_Val.slice(-1);

      var the_new = the_Val.replace(/\d$/,"");

      if(/-/.test(the_Val)){theFlag = the_new.slice(0,1);the_new = the_new.slice(1);}

      if(parseInt(the_new) >= 100){

        departNum(the_new,theArray);

        $(this).val(theFlag+theArray.join(",")+the_one+".00");

      }

      else{

        $(this).val(the_Val+".00");

      }

    }

    else{

      var theArray = [];

      var theFlag = "";

      var the_now = parseFloat(the_Val).toFixed(2);

      var the_nowStr = String(the_now).slice(-4);

      var the_new = String(the_now).replace(/\d\.\d\d/,"");

      if(/-/.test(the_Val)){theFlag = the_new.slice(0,1);the_new = the_new.slice(1);}

      if(parseInt(the_new) >= 100){

        departNum(the_new,theArray);

        $(this).val(theFlag+theArray.join(",")+the_nowStr);

      }

      else{

        $(this).val(String(the_now));

      }

    }

   }

 });

});

</script>

</head>

<body>

<input type="text" id="textId" ></input>

</body>

</html>

因为现在比较忙，所以对于你的第二个要求：
[Quote=引用 15 楼 tangyu477 的回复:]
2.只有失去焦点的时候才进行小数的判断和补充，是否可以做到和千分位一样每一次按键都进行格式化并返回，光标默认在小数点前面，当按下小数点符号后输入的数字自动替换小数点后的数字。
[/Quote]
等有时间，再进行完善！
happy664618843 2011-01-04
  • 打赏
  • 举报
 回复
{0:N2}格式化下!
汉尼拔 2011-01-04
  • 打赏
  • 举报
 回复
[Quote=引用 11 楼 itfirefly 的回复:]
引用 4 楼 shuixiya1999 的回复:
引用楼主 tangyu477 的回复:
...,如果用户输入的不是数字,便不能显示,...请指点下,谢谢了


JS能做到这个吗?

我用ASP.NET的文本框控件能够做到这个.
JS好像做不到吧?


只有想不到没有做不的到,百度的网页输入法看着就像js做的
[/Quote]

嗯,学习了onkeydown和blur事件
wwttqq85538649 2011-01-04
  • 打赏
  • 举报
 回复
我也正碰到这个问题
tfish2014 2011-01-04
  • 打赏
  • 举报
 回复
[Quote=引用 14 楼 clinhf 的回复:]
<html>
<head>
<script language="javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js" ></script>
<script language="javascript">
$(document).ready(function(){
//千分位处理函数
var ……
[/Quote]

非常感谢CLinHF，经过测试，有2点小小的瑕疵外，基本符合要求
1.负号只能第一个字母输入，用户如果输入到一半才发现应该是负数，则需要全部删除重新输入，对用户来说肯定会有点不满意的。
2.只有失去焦点的时候才进行小数的判断和补充，是否可以做到和千分位一样每一次按键都进行格式化并返回，光标默认在小数点前面，当按下小数点符号后输入的数字自动替换小数点后的数字。

===========================
（第二个只是我了解的最理想状态，很可能是因为控件的原因。第一个还是比较重要的，希望可以继续完善下）
CLinHF 2011-01-01
  • 打赏
  • 举报
 回复
<html>
<head>
<script language="javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js" ></script>
<script language="javascript">
$(document).ready(function(){
//千分位处理函数
var departNum = function(textVal,the_other){
var the_array = [];
var i = 0;
the_array.push(textVal.slice(textVal.length-2,textVal.length));
for(i=textVal.length-5;i>=0;i-=3){
the_array.push(textVal.slice(i,i+3));
}
if(0-i<3){the_array.push(textVal.slice(0,3+i));}
for(var k=the_array.length-1;k>=0;k--){
the_other.push(the_array[k]);
}
}
//输入限制
$("#textId").keypress(function(event){
var current = $(this).val();
if(event.keyCode&&(event.keyCode<45||(event.keyCode>45&&event.keyCode<48)||event.keyCode>57)){
if(event.keyCode == 46&&!/\./.test(current)){
if(!isNaN(parseInt($(this).val().replace(/,/,"")))){
$(this).val(current+".");
}
else{
$(this).val("0.");
}
}
event.preventDefault();
}
else{
if(event.keyCode == 45&&(/-/.test(current)||/\d/.test(current))){event.preventDefault();}
else{
if(!/\./.test(current)){
var the_new = $(this).val().replace(/,/g,"");
var theArray = [];
var theFlag = "";
if(/-/.test(current)){theFlag = the_new.slice(0,1);the_new = the_new.slice(1);}
if(parseInt(the_new) >= 100){
departNum(the_new,theArray);
$(this).val(theFlag+theArray.join(","));
}
}
}
}
}).blur(function(){
var the_Val = $(this).val().replace(/,/g,"");
if(!isNaN(parseFloat(the_Val))){
if(!/\./.test(the_Val)){
var theArray = [];
var theFlag = "";
var the_one = the_Val.slice(-1);
var the_new = the_Val.replace(/\d$/,"");
if(/-/.test(the_Val)){theFlag = the_new.slice(0,1);the_new = the_new.slice(1);}
if(parseInt(the_new) >= 100){
departNum(the_new,theArray);
$(this).val(theFlag+theArray.join(",")+the_one+".00");
}
else{
$(this).val(the_Val+".00");
}
}
else{
var theArray = [];
var theFlag = "";
var the_now = parseFloat(the_Val).toFixed(2);
var the_nowStr = String(the_now).slice(-4);
var the_new = String(the_now).replace(/\d\.\d\d/,"");
if(/-/.test(the_Val)){theFlag = the_new.slice(0,1);the_new = the_new.slice(1);}
if(parseInt(the_new) >= 100){
departNum(the_new,theArray);
$(this).val(theFlag+theArray.join(",")+the_nowStr);
}
else{
$(this).val(String(the_now));
}
}
}
});
});
</script>
</head>
<body>
<input type="text" id="textId" ></input>
</body>
</html>
作了些修改，可以实现千分位逗号区分和输入负数
加载更多回复（13）
JavaScript无限位小写金额转换中文大写
《JavaScript无限位小写金额转换大写金额》说明：1.本程序用JavaScript语言编写。转换方法严格遵照中国人民银行规定的银行支票中关于中文大写填写规范的相关规定（见下面附文），两可之处按简便方法处理。2.输入小写金额原则上默认为纯阿拉伯数字（含负号(-)），字符型数字或数值型数字均可。转换程序本身已包含对非数字符号的检测过滤，只对有效数字转换，如：--003 5a.6z08 = -35.608 = 负叁拾伍元陆角壹分。输入文本框的检测程序另行编写。3.所输入的阿拉伯数字具有一定容错性，支持一些不规范写法。如：., .01, -.01等。支持分位之后的四舍五入，如：.095 = 壹角整, -.999 = 负壹元整。4.输入和输出的金额不包含币别符号和文字，使用者可在使用时根据情况编辑。5.理论上可以无限位。采用数组处理，数组最大长度为2^32-1，作为经济工作使用足够。6.编写仓促，测试有限，如发现有错误之处请写信给lightwind5@163.com告知修改。
js 金额文本框实现代码
js 金额文本框实现代码，需要处理金额输入的朋友可以参考下
只能输入数字小数点负号正则
只能输入数字小数点负号正则.用于金额的验证等
react-currency-input：用于输入货币金额的React组件
React货币输入 ES2015货币React组件。 支持自定义的十进制和千位分隔符以及精度。 变化 1.3.0版： 不推荐使用“ onChange”选项，而推荐使用“ onChangeEvent”。 这修复了参数顺序以更好地匹配React的默认输入处理 更新了对React 15的依赖 添加了parseFloat polyfill 坚持使用事件来处理事件池问题 其他错误修复。 安装 npm install react-currency-input --save 积分 您可以在状态下存储传递给变更处理程序的值。 import React from 'react' import Curren
js格式化输入框内金额、银行卡号
主要介绍了js格式化输入框内金额、银行卡号，采用“keyup”事件处理格式化，每4位数一组中间空格隔开，如何格式化输入框内金额、银行卡号，需要了解的朋友可以参考一下
JavaScript

87,922

社区成员

224,618

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章