input框输入金额显示千分位

时间:2022-06-24 12:20:15

比如输入:1000000,则显示为1,000,000(或者是保留3位小数:1,000,000.000)

知识点:

1)JavaScript parseFloat() 函数:

定义:parseFloat() 函数可解析一个字符串,并返回一个浮点数

语法:parseFloat(string)

  a)parseFloat 将它的字符串参数解析成为浮点数并返回;

  b)如果在解析过程中遇到了正负号(+ 或 -)、数字 (0-9)、小数点,或者科学记数法中的指数(e 或 E)以外

的字符,则它会忽略该字符以及之后的所有字符,返回当前已经解析到的浮点数;

  c)参数字符串首位的空白符会被忽略;

注意:如果参数字符串的第一个字符不能被解析成为数字,则 parseFloat 返回 NaN。

提示:您可以通过调用 isNaN 函数来判断 parseFloat 的返回结果是否是 NaN。如果让 NaN 作为了任意数学运算的操作数,则运算结果必定也是 NaN。

 parseFloat("10")                10
parseFloat("10.00") 10
parseFloat("10.33") 10.33
parseFloat("34 45 66") 34
parseFloat(" 60 ") 60
parseFloat("40 years") 40
isNaN(parseFloat("40 years")) false
parseFloat("He was 40") NaN
isNaN(parseFloat("He was 40")) true

2)JavaScript toFixed() 方法:

定义:toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。

语法:NumberObject.toFixed(num),num参数必需,规定小数的位数,是 0 ~ 20 之间的值,包括 0 和 20,有些实

现可以支持更大的数值范围。如果省略了该参数,将用 0 代替。

如下:把数字舍入为仅有一位小数的数字:

 var num =13.36;
alert(num.toFixed(1)); 13.4

3)JavaScript isNaN() 函数:

定义:isNaN() 函数用于检查其参数是否是非数字值。

语法:isNaN(x),如果 x 是特殊的非数字值 NaN(或者能被转换为这样的值),返回的值就是 true。如果 x 是其他值,则返回 false,前提条件:x不能为空。

提示:isNaN() 函数通常用于检测 parseFloat() 和 parseInt() 的结果,以判断它们表示的是否是合法的数字。当然也可以用 isNaN() 函数来检测算数错误,比如用 0 作除数的情况

4)JavaScript reverse() 方法:

定义:reverse() 方法用于颠倒数组中元素的顺序

语法:array.reverse()

5)JavaScript split() 方法:

定义:split() 方法用于把一个字符串分割成字符串数组

语法:stringObject.split(separator,howmany)

  参数separator:必需。字符串或正则表达式,从该参数指定的地方分割 stringObject;

  参数howmany:可选。该参数可指定返回的数组的最大长度。如果设置了该参数,返回的子串不会多于这个参数指定的数组。如果没有设置该参数,整个字符串都会被分割,不考虑它的长度;

注释:如果把空字符串 ("") 用作 separator,那么 stringObject 中的每个字符之间都会被分割。

注释:String.split() 执行的操作与 Array.join 执行的操作是相反的

宝典在这

6)JavaScript join() 方法:

定义:join() 方法用于把数组中的所有元素放入一个字符串

语法:arrayObject.join(separator)

  参数separator:可选。指定要使用的分隔符。如果省略该参数,则使用逗号作为分隔符。

提示:join("")则意味将数组拼接成字符串

需求:

input框输入金额,要求按千分位显示并四舍五入保留3位小数,其中要求只能输入大于的0的数字,小数位不作限制

分析:

1、四舍五入且保留指定小数位:toFixed() 方法

2、输入大于0的数字且输入时小数位不做限制:正则表达式校验

  1)正整数部分(>0整数):[1-9][0-9]*  表示以1-9任意一个数开头,*表示出现0次或多次;

  2)含小数部分(注意不能是0.0000...):[0]\.[0-9]{0,2}[1-9]\d*|[1-9][0-9]*\.\d*  表示整数位0的小数保留3位四舍五入后不能是0.000,整数不为0的都可以

3、整数部分加千分位:

  1)先把经过toFixed()处理后,利用split(".")将整数和小数分开并分包存储;

   2)整数部分加千分位:可以从低位→高位,每隔3位插入逗号,还有注意最高位不能以逗号开头;

    2.1)利用split("")将整数部分切割成数组;

    2.2)利用reverse()将切割后数组颠倒;

    2.3)遍历数组:数组下标+1和3求余(数组下标从0开始)来重新拼接字符串或者push给新数组;

    2.4)再利用reverse()颠倒新数组,利用join("")拼接;

4、字符串拼接:整数部分加千分位+"."+小数部分;

<input class="base-form-input " id="mny" type="text" onchange="numChange(this.value)" value="<fmt:formatNumber type='number' value='' pattern="#,##0.000" maxFractionDigits='3'/>">

javaScript脚本(红色部分需要根据情况修改)

//光标离开输入的金额四舍五入并保留3位小数
$("#mny").blur(function(){//输入obj=123456.7890
var obj = this.value;
var mnyReg = /^([1-9][0-9]*|(([0]\.[0-9]{0,}[1-9]\d*|[1-9][0-9]*\.\d*)))$/;//根据需求修改
if(!(mnyReg.test(obj))){
layer.tips("请输入正确的资金", $(this).attr("id"),{time:1000});
return;
}
var n = ; //保留得小数位
obj = parseFloat(obj).toFixed(n); //obj=123456.789
var left = obj.split(".")[0].split("").reverse();//left = ["6","5","4","3","2","1"]
var right = obj.split(".")[1]; //right = "789"
var total = new Array();
for (i = 0; i < left.length; i++) {
total.push(left[i]);
if((i + 1) % 3 == 0 && (i + 1) != left.length){
total.push(",");
}
} //total = ["6","5","4",",","3","2","1"]
$("#mny").val(total.reverse().join("") + "." + right);
})
//光标进入,去除金额千分位,并去除小数后面多余的0
$("#mny").focus(function(){
var oldMny = this.value.replace(/,/g, '');
if(oldMny.indexOf(".")>0){
oldMny = oldMny.replace(/0+?$/,"");//去除尾部多余的0
oldMny = oldMny.replace(/[.]$/,"");//如果最后一位是.则去掉
}
this.value = oldMny;
})

取值进行保存操作的时候,要把千分位去掉:可以用全局匹配替换逗号

var reg_mny = $("#mny").val().trim().replace(/,/g, '');

如果想光标再次进入的时候显示原先输入的值,可以再方法外面定义一个变量var oldMny,存储输入的金额:

当光标进入时候,取oldMny赋值给input(最原始的未四舍五入的值);光标离开时候,则把input值存到oldMny;

input框输入金额显示千分位的更多相关文章

  1. input框输入手机号码分隔显示

    在input框输入手机号码时,自动加入空格按照3,4,4位显示,如: 实现方法如下: <label>手机号码</label><input type="text& ...

  2. js input框输入1位数字后自动跳到下一个input框聚焦

    // input框输入1位数字后自动跳到下一个input聚焦 function goNextInput(el){ var txts = document.querySelectorAll(el); f ...

  3. js控制input框输入数字时,累计求和

    input框输入数字时,自动开始计算累加 <div class="form-group"> <label for="inputPassword3&quo ...

  4. JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去…

    JavaScript 格式化数字.金额.千分位.保留几位小数.舍入舍去… 类库推荐 1. Numeral.js 一个用于格式化和操作数字的JavaScript库.数字可以被格式化为货币,百分比,时间, ...

  5. 模拟邮箱输入邮箱地址、收藏标签。input框输入内容后回车,内容显示成小方块并带删除按钮。

    模拟邮箱输入邮箱地址.收藏标签: 文本框输入文字后按回车键或者分号键,输入框中的文字变成小块并带删除按钮和操作. 页面代码: <!DOCTYPE html> <%@ page lan ...

  6. JS-为金额添加千分位逗号分割符

    前言:这个功能在前端页面中使用的还是比较多的,正好我们的项目中也有使用此功能,不过YY同学写的代码不像个方法的样子,一个入口中间又插了几道子,所             以,我写了下面这个方法,经过测 ...

  7. edittext实现显示千分位格式

    在edittext中你在输入1123456789过程中自动显示为1,123,456,789这种千分位格式的.那么我们该怎么做呢? 查阅Android edittext api发现它有这样一个方法add ...

  8. input 框输入数字相关

    input框限制只能输入正整数,逻辑与和或运算 有时需要限制文本框输入内容的类型,本节分享下正则表达式限制文本框只能输入数字.小数点.英文字母.汉字等代码. 例如,输入大于0的正整数 代码如下: &l ...

  9. input输入框数字转带千分位的字符串

    数字转带千分位的字符串 思路 先获取要转换的数字,对其进行分割 小数部分具体需要保留多少位,具体处理 整数部分用正则做替换 将小数部分和整数部分合计 代码 注意: 本文是基于 jQuery 写的,稍稍 ...

随机推荐

  1. Java Sax解析

    一.   Java Sax解析是按照xml文件的顺序一步一步的来解析,在解析xml文件之前,我们要先了解xml文件的节点的种类,一种是ElementNode,一种是TextNode.如下面的这段boo ...

  2. Hibernate SQLQuery简单实用,做链接查询

    工单里面可能有0个告警,一个或多个告警,当工单中没有告警的时候也需要将工单显示出来,所以就需要使用工单和告警的做链接查询,下面是具体实例 表: CREATE TABLE `alarm` ( `id` ...

  3. jQuery上传插件&comma;文件上传测试用例

    jQuery上传插件,文件上传测试用例 jQuery File Upload-jQuery上传插件介绍http://www.jq22.com/jquery-info230 jQuery File Up ...

  4. 【leetcode】155 - Min Stack

    Design a stack that supports push, pop, top, and retrieving the minimum element in constant time. pu ...

  5. 浅析foreach原理

    在日常开发工作中,我们发现很多对象都能通过foreach来遍历,比如HashTable.Dictionary.数组等数据类型.那为何这些对象能通过foreach来遍历呢?如果写一个普通的Person类 ...

  6. Educational Codeforces Round 9 -- A - Grandma Laura and Apples

    题意: 外祖母要卖苹果,(有很多但不知道数量),最终所有苹果都卖光了! 有n个人买苹果,如果那个人是half,他就买所有苹果的一半,如果那个人是halfplus,则他买当前苹果数量的一半,Laura还 ...

  7. 【Linux】查看系统信息

    查看发行版本 [root@centos68 ~]# more /etc/issue CentOS release 6.9 (Final) RedHat 系 [root@centos68 ~]# cat ...

  8. 数据结构与算法-&gt&semi;树-&gt&semi;2-3-4树的查找&comma;添加&comma;删除&lpar;Java&rpar;

    代码: 兵马未动,粮草先行 作者: 传说中的汽水枪 如有错误,请留言指正,欢迎一起探讨. 转载请注明出处. 目录 一. 2-3-4树的定义 二. 2-3-4树数据结构定义 三. 2-3-4树的可以得到 ...

  9. &lbrack;转载&rsqb; Java中常用的加密方法

    转载自http://www.iteye.com/topic/1122076/ 加密,是以某种特殊的算法改变原有的信息数据,使得未授权的用户即使获得了已加密的信息,但因不知解密的方法,仍然无法了解信息的 ...

  10. Java进阶&lpar;二十&rpar;解疑答惑之何时字符串才算真正为空?

    解疑答惑之何时字符串才算真正为空? 在一次编码过程中,有一个现象一直困扰着自己,经过后台的不断调试,才发现原来有时候字符串的空非空.测试代码如下: // medname可为药品名称或药品ID Stri ...