h5上完美支持自定義輸入小數點前多少位和小數點後多少位（vue）

支持

• 彈出數字鍵盤
• 小數點前自定義最多輸入幾位（默認11位）
• 小數點後自定義最多輸入幾位（默認4位）
• 若是設置小數點後爲0位，則不容許輸入小數點
• 解決IOS彈出系統鍵盤收起後，頁面不恢復

<template>
  <input
    ref="number"
    @input="input"
    :placeholder="placeholder"
    :value="value"
    @blur="blur"
    type="number">
</template>
<script>

export default {
  props: {
    value: { // 設置值
      default: '',
      type: null
    },
    integerDigits: { // 小數點前幾位
      default: 11,
      type: Number
    },
    decimalDigits: { // 小數點後幾位
      default: 4,
      type: Number
    },
    placeholder: { // 設置默認值
      default: '',
      type: String
    }
  },
  data () {
    return {
      oldValue: this.value,
      isDel: false, // 是不是刪除操做
      isDot: false // 是不是小數點輸入操做
    }
  },
  computed: {
  },
  components: {
  },
  created () {

  },
  methods: {
    input (event) {
      this.isDel = false
      this.isDot = false
      if (event.data === null) this.isDel = true
      if (event.data === '.') this.isDot = true

      let reg
      if (this.decimalDigits > 0) {
        reg = new RegExp(`(?!^0\\d)^(\\d{1,${this.integerDigits}}(\\.\\d{0,${this.decimalDigits}})?)?$`, 'g')
      } else {
        reg = new RegExp(`(?!^0\\d)^(\\d{1,${this.integerDigits}})?$`, 'g')
      }

      if (reg.test(event.target.value)) {
        if (event.target.value !== '' || this.isDel) { // 若是不是由於後退，讓值變空，就不改變舊值
          this.oldValue = event.target.value
        }
      }
      if (this.isDot) {
        if ((event.target.value && /\./g.test(event.target.value)) || this.decimalDigits === 0) {
          event.target.value = null // 多餘的.強制刷新
        }
      }
      event.target.value = this.oldValue
      this.$emit('input', this.oldValue)
    },
    blur () {
      this.resolveBug()
    },
    resolveBug(){
      clearTimeout(this.timer)
      this.timer=setTimeout(function(){
        if(document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA'){
          return
        }
        let result = 'pc';
        if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { // 判斷iPhone|iPad|iPod|iOS
          result = 'ios'
        }else if(/(Android)/i.test(navigator.userAgent)) {  // 判斷Android
          result = 'android'
        }
        if(result === 'ios' ){
          document.activeElement.scrollIntoViewIfNeeded(true);
        }
      },10)
    }
  }
}
</script>

<style scoped>
</style>

使用方式

<NumberInput
   :integerDigits="4"
   :decimalDigits="2"
   class="input"
   v-model="value"/>

解決點：

• 不容許輸入相似於 "0666", "0006"
• 不容許輸入多餘的 ".", 如輸入 "3.02."

備註：若是對你有幫助，請幫忙點個贊