1. When type=number or v-model.number

maxlength is invalid because the attribute is valid for text, textarea, and password types.

When type=number, the binding input is of type Number and cannot get length.

2. Global matching of phone numbers, verification codes (numbers only), and prices (numbers and decimal points only)

Note: type must be set to text

// main.js
// Only numbers can be entered to match the phone number
Vue.directive('enterNumber', {
  inserted: function(el) {
    el.addEventListener('keypress', function(e) {
      console.log(e)
      e = e || window.event
      const charcode = typeof e.charCode === 'number' ? e.charCode : e.keyCode
      const re = /\d/
      if (!re.test(String.fromCharCode(charcode)) && charcode > 9 && !e.ctrlKey) {
        if (e.preventDefault) {
          e.preventDefault()
        } else {
          e.returnValue = false
        }
      }
    })
  }
})

// Match numbers and decimal points
Vue.directive('enterPrice', {
  inserted: function(el) {
    el.addEventListener('keypress', function(e) {
      e = e || window.event
      const charcode = typeof e.charCode === 'number' ? e.charCode : e.keyCode
      const re = /\d|[.]/
      if (!re.test(String.fromCharCode(charcode)) && charcode > 9 && !e.ctrlKey) {
        if (e.preventDefault) {
          e.preventDefault()
        } else {
          e.returnValue = false
        }
      }
    })
  }
})

// index.vue
// Phone number
<el-input
 v-enter-number
 v-model.trim="phoneNum"
 maxlength="11"
 type="text"
 placeholder="Phone number"/>
// Price
<el-input
 v-enter-price
 v-model.trim="price"
 type="text"
 placeholder="Price"/>

When I upgraded the element UI version from 2.7.0 to 2.13.0, the global settings did not restrict the input of Chinese and symbols, and there were compatibility problems

Solution: you need to restrict the input of Chinese and symbols at @ input

<el-input
 v-enter-number
 v-model.trim="phoneNum"
 maxlength="11"
 type="text"
 name="phoneNum"
 auto-complete="off"
 placeholder="Phone number"
 clearable
 @input="phoneNum = phoneNum.replace(/[^\d]/g, '')"
 @keyup="onkeypass($event)" />


    /**
     * Limited to Chinese, compatible with Firefox and ie
     */
    onkeypass(evt) {
      console.log(evt)
      // Firefox uses evt.which to get the keyboard key value, IE uses window.event.keyCode to get the keyboard key value
      const e = evt.which ? evt.which : window.event.keyCode
      if (e >= 48 && e <= 57) {
        return true
      } else {
        return false
      }
    }

3. How to remove the browser's default icon when the type attribute of input is password or text (compatible with Firefox, ie, safari, Google)

Remove the eye icon of input type=password, and the solution is as follows:

::-ms-reveal{display:none;}

Remove the small fork of input type=text, and the solution is as follows:

::-ms-clear{display:none;}

(4) Remove style when input type="number"

resolvent:

// Disable the increase / decrease button of input type='number '(Firefox, Safari, Chrome, ie)
input[type=number] {
  -moz-appearance:textfield !important; /* Firefox */
  appearance:textfield !important;
  -webkit-appearance:textfield !important; /* Safari And Chrome */
}
// Google
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

To be continued..