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>jsgetPhone(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-inputv-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)"/>
完美!
,不平凡不妥协