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. Android开发----EditText&ImageView&第三方库的加载

    EditText组件 一个实例描述该组件的全部属性(虚假的登录界面) 在activity.xml中 <?xml version="1.0" encoding="ut ...

  2. 安卓开发常见Bug-setContentView(R.layout.....)报错

    这是安卓开发的常见错误,当你在引用或者复制别人的Layout xml文件时需要在AndroidManifest.xml中添加东西 需要将图中的activity android:name添加进去,否则是 ...

  3. stram流char[]保存,支持中文,Filestram需要先转byte[]才能使用,但是性能更好《转载》

    学习流的使用时(stream类),逐步遇到新的理解,记录一下 1.FileStream流是处理byte[],默认UTF8类型 当你使用wirte方法时将非byte类型的输入内容,先将内容通过转换为字节 ...

  4. TensorFlow 深度学习中文第二版·翻译完成

    原文:Deep Learning with TensorFlow Second Edition 协议:CC BY-NC-SA 4.0 不要担心自己的形象,只关心如何实现目标.--<原则>, ...

  5. [论文笔记][半监督语义分割]Universal Semi-Supervised Semantic Segmentation

    论文原文原文地址 Motivations 传统的训练方式需要针对不同 domain 的数据分别设计模型,十分繁琐(deploy costs) 语义分割数据集标注十分昂贵,费时费力 Contributi ...

  6. AT2274 [ARC066D] Contest with Drinks Hard

    先考虑不修改怎么做,可以令 \(dp_i\) 表示前 \(i\) 个题能获得的最大得分.那么我们有转移: \[dp_i = \min\{dp_{i - 1}, dp_{j} + \frac{(i - ...

  7. HTML Flex 布局

    感谢原文作者:在路上de 小白 原文链接:https://www.cnblogs.com/likun123/p/9518466.html#commentform 目录 一.Flex 布局是什么? 二. ...

  8. [转]API性能测试基本性能指标及要求

    原文链接http://blog.csdn.net/strawbingo/article/details/46458959 指标的基本概念 1.事务(Transaction) 在web性能测试中,一个事 ...

  9. iOS 七大手势之轻拍,长按,旋转手势识别器方法-赵小波

    一.监听触摸事件的做法 如果想监听一个view上面的触摸事件,之前的做法通常是:先自定义一个view,然后再实现view的touches方法,在方法内部实现具体处理代码 通过touches方法监听vi ...

  10. .netcore基础知识(一)

    先来说说web服务器  先来一张图 一个典型的进程外托管模型 我们先看kestrel这一部分 我们在它前面放了一个方向代理服务器nginx 对http请求做预处理 kestrel本身是可以直接用作we ...