input输入框的限制

leader755

发布于 2022-03-09 14:04:43

2.3K0

发布于 2022-03-09 14:04:43

原生输入对复制粘贴也会生效，但是 vue 中的双向绑定 v-model 会出现，实际值并没有改变而使显示值变化了。

1.文本框只能输入数字

<input onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')">

2..只能输入数字和小数点

<input type=text t_value="" o_value="" onkeypress="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value" onkeyup="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value" onblur="if(!this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?|\.\d*?)?$/))this.value=this.o_value;else{if(this.value.match(/^\.\d+$/))this.value=0+this.value;if(this.value.match(/^\.$/))this.value=0;this.o_value=this.value}">

3.输入负数、0、正数，小数点保留 2 位小数

function money(obj){
  obj.value = obj.value.replace(/[^\d.]/g,"");//清除"数字"和"."以外的字符
  // obj.value = obj.value.replace(/[^-\d.]/g, ""); //清除"-","数字"和"."以外的字符
  obj.value = obj.value.replace(/^\./g,"");//验证第一个字符是数字而不是字符
  obj.value = obj.value.replace(/\.{2,}/g,".");//只保留第一个.清除多余的
  obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
  obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');//只能输入两个小数
}

1>输入 0、正数，小数点保留 2 位小数

<el-input v-else :placeholder="changePriceTitleplaceholder" v-model="ruleFormPrice.raiseNumber" style="width:170px" oninput="this.value=this.value.replace(/[^\d.]/g,'').replace(/^\./g,'').replace(/\.{2,}/g,'.').replace('.','$#$').replace(/\./g,'').replace('$#$','.').replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')">
   <i slot="suffix">{{PriceType ? "元":"%"}}</i>
</el-input>

2>输入负数，0、正数，小数点保留 2 位小数

<el-input v-else :placeholder="changePriceTitleplaceholder" v-model="ruleFormPrice.raiseNumber" style="width:170px" oninput="this.value=this.value.replace(/[^-\d.]/g,'').replace(/^\./g,'').replace(/\.{2,}/g,'.').replace('.','$#$').replace(/\./g,'').replace('$#$','.').replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')">
   <i slot="suffix">{{PriceType ? "元":"%"}}</i>
</el-input>

vue 的 input 输入框

一、@input

适用于实时查询，每输入一个字符都会触发该事件

<input type="text" placeholder="通过乘车人/订单号查询" v-model="inputVal" @input="search" />

二、@keyup.enter

该事件与 v-on:input 事件的区别在于：input 事件是实时监控的，每次输入都会调用，而@keyup.enter 事件则是在 pc 上需要点击回车键触发，而在手机上则是需要点击输入键盘上的确定键才可触发。

<input type="text" placeholder="通过乘车人/订单号查询" v-model="inputVal" @keyup.enter="search" />

三、@change

该事件和 enter 事件相似，在手机上都是要经过触发虚拟键盘的搜索键才会触发事件。使用方式同 input 事件。注：在 ios 手机上会出现问题: 如果要的效果是输入值不用虚拟键盘触发方法就调查询接口进行查询，这时在安卓手机上没有问题，但是在 ios 手机上会出现多次触发的情况。简单的解决办法：对 input 的值进行监听（watch），把原本需要绑在 input 框的事件在监听变化时调用。

<input type="text" placeholder="通过乘车人/订单号查询" v-model="inputVal" @change="search" />

watch:{
  inputVal(newVal,oldVal){
        comsole.log(newVal)
   }
 }

四、@blur（失焦）

要满足输入框在输入完成、移到其他地方时进行验证时，需要用到该事件，用此事件进行绑定验证方法即可。注：如果使用 mintui 中的 mt-field 标签时，对应的 blur（失焦）事件要执行时，要用@blur.native.capture=””来代替@blur。

<mt-field label="用户名" placeholder="请输入用户名" type="text" v-model="username" @blur.native.capture="testUser"></mt-field>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020-10-26，如有侵权请联系 cloudcommunity@tencent.com 删除

ios

vue.js

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

ios

vue.js

登录后参与评论

0 条评论

热度