El input limit can only input numbers

el-input Limit can only enter numbers

Method 1 ：

By setting type attribute ：type="number"

<el-input
  maxlength="11"
  type="number"
  v-model="ruleForm.phone"
  placeholder=" Please enter contact information "
  show-word-limit
></el-input>

But this approach usually affects the style , Not recommended , Pictured ：

Method 2 ：

By binding value constraints ：v-model.number="ruleForm.phone"

But this method will limit the general number , But it will affect  maxlength attribute , also e It can be entered , In general, you can use , Strictly limited words are not recommended

Method 3 ：

It is recommended to use

By binding value Value for regular restriction ：οnkeyup="value=value.replace(/[^\d]/g, ' ')"

Bind one onkeyup Monitoring events , /[^\d]/g Is a regular expression that matches all non numeric content , Replace it with an empty string , This approach does not affect any properties

<el-input
  maxlength="11"
  v-model="ruleForm.phone"
  placeholder=" Please enter contact information "
  show-word-limit
  oninput="value=value.replace(/[^\d]/g,'')"
></el-input>