input标签或者el-input标签

<input type="text" placeholder="请输入手机号" class="search_txt" v-model="searchPhone" maxlength="11" oninput = "value=value.replace(/[^\d]/g,'')">

<el-input v-model="searchForm.phone" placeholder="请输入手机号" maxlength="11" oninput = "value=value.replace(/[^\d]/g,'')"></el-input>

方法是一致的
*只能输入数字:

 oninput = "value=value.replace(/[^\d]/g, '')"
 空格无效
 oninput = "value=value.replace(/\s+/g, '')"
 onkeyup="this.value=this.value.replace(/\s+/g, '')"

最大长度11位:

:maxlength="11"

亲测没发现有啥问题,如有发现,望提出,谢谢亲们。

后面去尝试快速输入中文,然后再去输入数字测试,发现打印出来的不是自己输入的值了。

之后加多一段

onkeyup="this.value=this.value.replace(/[^\d.]/g,'');"

不算完美,但是自己公司使用,暂时顶住先

补充:
这个方法中还可以输入…,可以通过操作字符串去掉或者过滤!不用点就去掉

this.value=this.value.replace(/[^\d]/g,'');
继续补充:使用上面方法会有问题,比如我先输入了数字,然后点击非数字,会把自己输入的数字给去掉,所以:
html
<div>
      只能输入数字
  <a-form layout="inline" :form="numForm">
    <a-form-item label="号码" >
      <a-input @input="getPhone" v-decorator="['num']" placeholder="请输入号码"></a-input>
    </a-form-item>
    <a-button type="primary" html-type="submit" @click="getFormNum">查询</a-button>
  </a-form>
</div>
js
getPhone(obj) {
  console.log(obj)
  obj.target.value = obj.target.value.replace(/[^\d]/g,"");
  this.numForm.setFieldsValue({
    num: obj.target.value
  })
},
// 获取号码
getFormNum() {
  console.log(this.numForm.getFieldsValue())
},
再补充:
<a-input
 v-if="record.min"
  style="margin: -5px 0"
  :value="record.min"
  oninput = "this.value=value.replace(/[^\d]/g, '')"
  onkeyup="this.value=this.value.replace(/[^\d]/g,'');"
  @input="e => changeMin(e, record)"
/>
完美!

2020,不平凡不妥协

GitHub 加速计划 / eleme / element
10
1
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:7 个月前 )
c345bb45 11 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 11 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐