输入框input(element-ui、antd)中el-input组件只能输入数字(空格无效)
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element

·
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,不平凡不妥协




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 个月前
更多推荐
所有评论(0)