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)">

效果