HTML:

<input type="tel" class="capital mui-input-clear" value="0.00">
 
<div class="redbag_box4_son">¥0.00</div>
 

JS:

$(document).ready(function(){
    // 限制文本框只能输入数字和小数点
    var precapital;
    document.querySelector('.capital').addEventListener('focus', function() {
        if (this.value == '0.00') {
            this.value = '';
        } else {
            this.value = this.value.replace(/\.00/, '').replace(/(\.\d)0/,'$1');
        }
        precapital = this.value;
    });
    document.querySelector('.capital').addEventListener('keyup', function() {
        this.value = this.value.replace(/^[\.]/, '').replace(/[^\d.]/g, '');
        if (this.value.split(".").length - 1 > 1) {
            this.value = precapital;
        }
        precapital = this.value;
    });
    document.querySelector('.capital').addEventListener('blur', function() {
        this.value = this.value.replace(/[\.]$/, '');
        this.value = this.value.replace(/(.*)\.([\d]{2})(\d*)/g,'$1.$2');
        this.value = Number(this.value).toFixed(2);
        var logNum = this.value.toString();
        if(logNum.match(/\./g) != null){
            integerNum = parseInt(logNum).toString().replace(/\d(?=(\d{3})+$)/g,'$&,');
            decimalNum = '.' + logNum.replace(/(.*)\.(.*)/g,'$2');
            document.querySelector(".redbag_box4_son").innerHTML = '¥'+integerNum+decimalNum;
        }else{
            document.querySelector(".redbag_box4_son").innerHTML = logNum.replace(/\d(?=(\d{3})+$)/g,'$&,');
        }
    });
})

参考链接:https://www.cnblogs.com/kousuke/p/perfect-input-for-money.html

input框限制输入金额的更多相关文章

  1. js—input框中输入数字,动态生成内容的方法

    项目中需要在前端实现: 用户输入数字n,动态生成n个元素,删除n,自动清空n个元素(如图一): 用户输入数字n,失焦生成n个元素,再聚焦修改n,自动清空n个元素(如图二): 图一: 图二: 需求一实现 ...

  2. jquery限制文本框只能输入金额

    $("#batch_diff_percent").keyup(function () { var reg = $(this).val().match(/\d+\.?\d{0,2}/ ...

  3. JS 限制input框的输入字数,并提示可输入字数

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  4. js控制input框只能输入数字和一位小数点和小数点后面两位小数

    <script language="JavaScript" type="text/javascript"> function clearNoNum( ...

  5. 使用正则限制input框只能输入数字/英文/中文等等

    常用HTML正则表达式 1.只能输入数字和英文的: 复制代码代码如下: <input onkeyup="value=value.replace(/[/W]/g,'') " o ...

  6. input框的输入限制

    1.输入数字 <input onKeyUp="value=value.replace(/[^\d|chun]/g,'')"> 2.只输入中文 <input typ ...

  7. 使用UIkit的uk-form-icon后input框无法输入的问题

    相关版本UIkit2.27.5 uikit.min.css默认使用uk-form-icon的属性pointer-events: none:因此表框无法点击. <style type=text/c ...

  8. javascript判断input框只能输入数字的方法

    javascript 只允许输入数字有很多方法,总结如下 1,只允许输入数字和小数点. <input onKeypress="return (/[\d.]/.test(String.f ...

  9. vue开发中利用正则限制input框的输入(手机号、非0开头的正整数等)

    我们在前端开发中经常会碰到类似手机号输入获取验证码的情况,通常情况下手机号的输入需要只能输入11位的整数数字.并且需要过滤掉一些明显不符合手机号格式的输入,那么我们就需要用户在输入的时候就控制可以输入 ...

随机推荐

  1. ssh 信任关系无密码登陆,清除公钥,批量脚本

    实验机器: 主机a:192.168.2.128 主机b:192.168.2.130 实验目标: 手动建立a到b的信任关系,实现在主机a通过 ssh 192.168.2.130不用输入密码远程登陆b主机 ...

  2. vi与vim编辑器与解决vim编辑异常

    目录 一:vi与vim编辑器 二:解决vim编辑异常 一:vi与vim编辑器 vim是vi的升级版编辑器,就是vim比vi丰富一些. 1.安装vim 命令 yum install vim -y 2.打 ...

  3. rm误操作 which查看命令存放路径

    目录 一:rm误操作 which查看命令存放路径 一:rm误操作 which查看命令存放路径 解决rm命令误操作 让别人使用不了自己的rm命令 将rm命令改一个名称 mv rm abc 查看命令存放路 ...

  4. Java动态绑定和静态绑定-多态

    一.问题 Java方法调用过程中,Jvm是如何知道调用的是哪个类的方法?Jvm又是如何处理?   二.概念 a.当子类和父类(接口和实现类)存在同一个方法时,子类重写父类(接口)方法时,程序在运行时调 ...

  5. VC++ 启用内存泄露检测

    _CrtDumpMemoryLeaks()就是检测从程序开始到执行该函数进程的堆使用情况,通过使用_CrtDumpMemoryLeaks()我们可以进行简单的内存泄露检测. #include &quo ...

  6. 深入Windows APC

      本篇原文为 Depths of Windows APC ,如果有良好的英文基础,可以点击该链接进行阅读.本文为我个人:寂静的羽夏(wingsummer) 中文翻译,非机翻,著作权归原作者 Rbmm ...

  7. 「Ynoi2018」未来日记

    「Ynoi2018」未来日记 区间x->y,kth值... 不管了,先序列分块... 查询 第k值,假定知道每个数的权值,对值域分块. 对于整块,维护前\(i\)个块当中,值域在\(j\)块里以 ...

  8. 模仿系统的UIImageView

    整体思路:     我们想要模仿系统的UIImageView,我们必须得要知道系统的UIView怎么用.     系统的用法是创建一个UIImageView对象,设置frame,给它传递一个UIIma ...

  9. 实例15_C语言绘制万年历

    实例说明:

  10. Java线程状态介绍

    原创:转载需注明原创地址 https://www.cnblogs.com/fanerwei222/p/11867086.html Java 线程状态介绍: Java官方文档中对Java线程的几种状态做 ...