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. python+fastdfs+nginx实现打包下载功能

    环境介绍:生产服务器开发人员需要给client下发数据,主要是图片及视频:图片服务器用fastdfs,下载由nginx 来提供: java 程序来调用此脚本,传递参数来决定打包文件内容: #!/usr ...

  2. K8s PV and PVC and StorageClass

    PVC和PV之间没有依靠ID.名称或者label匹配,而是靠容量和访问模式,PVC的容量和访问模式需要是某个PV的子集才能自动匹配上.注意:PVC和PV是一对一的,也即一个PV被一个PVC自动匹配后, ...

  3. python 中 *args he **kwargs的区别

    ''' 一 *args 和 **kwargs 的区别? *args 表示任意个 无名参数, 类型是元祖 tuple. **kwargs 表示的是关键字的参数 传入的参数是 dict 类型. 当*和** ...

  4. springboot 使用select的注解,来查询数据库。

    package com.aaa.zxf.mapper; import com.aaa.zxf.model.Book; import org.apache.ibatis.annotations.*; i ...

  5. Angular中$broadcast和$emit的使用方法

    要在控制器之间传递变量变化需要使用angular中的$broadcast和$emit方法来传递,同时使用$on来接收事件并作出响应. broadcast译为广播,即上级传递下级. 示例代码: < ...

  6. Mac 使用自带php和Apache 安装配置Xdebug 开启本地调试模式

    Mac 安装配置php xdebug 本地调试 0.原理图 https://paper.seebug.org/308/ 测试demo构建方法 新建空白项目,目录选择Apache默认项目目录 1.下载x ...

  7. 性能测试之监控--zabbix通过jmx监控tomcat

    前提: 已经安装好了zabbix server 实验环境 Centos 7 Zabbix 3.0 Tomcat 7.0 JDK 1.8 安装JDK tar -zxvf jdk-8u181-linux- ...

  8. MyBatis加强(1)~缓存机制(一级缓存、二级缓存、第三方缓存技术redis、ehcache)

    一.缓存机制 使用缓存可以使应用更快地获取数据,避免频繁的数据库交互操作,尤其是在查询越多,缓存命中率越高 的情况下,缓存的作用就越明显. 1.缓存原理:Map ■ 查询时,先从缓存区查询:找到,返回 ...

  9. Go vs Java vs C# 语法对比

    目录 1. 说明 2. 对比 2.1 关键字(keywords) 2.1.1 Go 2.1.2 Java 2.1.3 C# 2.1.4 小结 2.2 基本数据类型 2.2.1 Go 基本数据类型 2. ...

  10. MySQL5.7修改登录密码的几种方式

    1.更新mysql.user表 use mysql UPDATE user SET authentication_string = password('新密码') where user = 'root ...