介绍一个vue应用:限制输入数字或者保留两位小数。
原生方法使用
加上inputmode属性解决ios端调起带小数点的数字键盘问题。
<label>价格:</label> <input type="text" v-model.trim="price" inputmode="decimal" placeholder="请输入价格" @keyup="handlePrice(price)"/>
vant使用方法
允许输入数字,调起带符号的纯数字键盘。
<van-field type="number" v-model.number="price" label="价格" placeholder="请输入价格" @keyup="handlePrice(price)"/>
限制保留两位小数方法。
handlePrice(val){ if (val !== '' && val.substr(0, 1) === '.') { val = ""; } val = val.replace(/^0*(0\.|[1-9])/, '$1');//解决 粘贴不生效 val = val.replace(/[^\d.]/g, ""); //清除“数字”和“.”以外的字符 val = val.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的 val = val.replace(".", "$#$").replace(/\./g, "").replace("$#$", "."); val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');//只能输入两个小数 if (val.indexOf(".") < 0 && val !== "") { if (val.substr(0, 1) === '0' && val.length === 2) { val = val.substr(1, val.length); } } this.priceAll = this.priceOne = val; },
网友评论文明上网理性发言 已有0人参与
发表评论: