el-input can only enter numbers

el-input can only enter numbers

method one:

By setting the type attribute: type="number"

<el-input
  maxlength="11"
  type="number"
  v-model="ruleForm.phone"
  placeholder="请输入联系方式"
  show-word-limit
></el-input>

However, this method will generally affect the style and is not recommended, as shown in the figure:

Method Two:

Restricted by binding value: v-model.number="ruleForm.phone"

But this method will limit the general number, but it will affect the maxlength attribute, and e can be entered, which can be used in general situations, and it is not recommended for strict restrictions

Method three:

It is recommended to use

Regularly restrict the value of the binding: οnkeyup="value=value.replace(/[^\d]/g, ' ')"

Bind an onkeyup listener event, /[^\d]/g is a regular expression used to match all non-numeric content, replace it with an empty string, this method will not affect any attributes

<el-input
  maxlength="11"
  v-model="ruleForm.phone"
  placeholder="请输入联系方式"
  show-word-limit
  oninput="value=value.replace(/[^\d]/g,'')"
></el-input>