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


    数字转带千分位的字符串

    思路

    1. 先获取要转换的数字,对其进行分割
    2. 小数部分具体需要保留多少位,具体处理
    3. 整数部分用正则做替换
    4. 将小数部分和整数部分合计

    代码

    注意: 本文是基于 jQuery 写的,稍稍改改就可以成为原生的

    在 String 原型链上增加以下方法

    /**
     * 将含有千分位符的数字字符串切成不含千分位符的字符数按
     * @param {String} str 传入含有 千分位符的 字符串
     */
    String.prototype.thousandsToNumber = function (str) {
      return str.split(",").join("");
    }
    
    /**
     * 目标失去焦点保留小数并转为含有千分位符的字符串
     * @param {Number} num 保留的小数位数 默认保留2位小数
     */
    String.prototype.numToStr = function (num) {
    
      if (this.length == 0) return
      
      num = num ? num : 2
      var val = this.thousandsToNumber(this.toString())
      var IntegerPat, decimalPat
      decimalPat = '.' + parseFloat(val).toFixed(num).split('.')[1]
      IntegerPat = this.dealIntegerPat(val)
    
      return IntegerPat + decimalPat
    }
    
    /**
     * 将字符串转为含有千分位符的数字
     */
    String.prototype.numToChange = function () {
    
      var val = this.thousandsToNumber(this.toString())
      var IntegerPat, decimalPat
      decimalPat = val.indexOf('.') != -1 ? '.' + val.split('.')[1] : ''
      IntegerPat = this.dealIntegerPat(val)
    
      return IntegerPat + decimalPat
    }
    
    /**
     * 将传入的数字型字符串 转换成 保留整数部分 并且含有 千分位符的字符串
     * @param {String} ret 传入字符串
     */
    String.prototype.dealIntegerPat = function (ret) {
      return (ret.indexOf('.') != -1 ? ret.split('.')[0] : ret).replace(/(d{1,3})(?=(d{3})+(?:$|.))/g, '$1,')
    }

    调用

    // 全局变量,用来存储 input 再更改之前的值
    var targeSeleStat, oldVal;
    
    /**
     * 将闯入的含有千分位的数字转为保留多少位的小数的千分位值    失去焦点触发
     * @param {String} val 传入的值
     * @param {Element} ele 传入的this
     * @param {Number} num 小数位数
     */
    function numToStr(val, ele, num) {
      $(ele).val(val.numToStr(num))
    }
    
    $("#input")
      .on("input propertychange", function (e) {
    
        var val = $(this).val()
        var setLastSele = e.target.selectionEnd
        var leveEnd = oldVal.length - targeSeleStat
        var val = val.numToChange()
    
        $(this).val('').focus().val(val)
    
        if (val.length != setLastSele) {
          e.target.selectionStart = e.target.selectionEnd = val.length - leveEnd
        }
      })
      .blur(function (e) {
        targeSeleStat = 0
      })
      .click(function (e) {
        targeSeleStat = e.target.selectionStart
        oldVal = $(this).val()
      })

    HTML 代码

    <input id='input' type="text" onblur="numToStr(this.value, this, 5)">

    效果

  • 相关阅读:
    tp5 -- 微信公众号支付
    tp5对接支付宝支付简单集成
    tp5 -- 腾讯云cos简单使用
    PHP 递归无限极下级
    PHP 头部utf-8
    ThinkPHP5.0-多语言切换
    MySQL插入SQL语句后在phpmyadmin中注释显示乱码
    C#中练级orcle数据查询
    sql中递归查询
    sql server数据类型与其他数据库数据类型对应关系
  • 原文地址:https://www.cnblogs.com/donve/p/11040738.html
Copyright © 2020-2023  润新知