标签限制输入
2019-06-26 本文已影响0人
AR7_
方案一:
因为方案二会有一个问题,就是不能保留两位小数点,也就是金额的角和分,而且如果输入法是中文输入,然后按下切换中英文键shift
,会发现可以输入英文字母,显然是有问题的,以下方案可以解决这两个问题。
<el-input size="medium"
class="el-input-style"
v-model.trim="inputMony"
placeholder="请输入充值金额"
:maxlength="inputMaxL"
@input="inputMaxL = /^\d+\.?\d{0,1}$/.test(inputMony)? null: inputMony.length - 1"
:onkeyup="(inputMony = inputMony.replace(/[^0-9.]/gi, ''))">
方案二:
当实现充值功能时,使用<el-input>进行金额输入,所以需要将type设置为number类型,但是会发现,字母e
和小数点.
还是可以输入,为了达到限制输入,需要做以下处理。
<el-input size="medium" type="number" placeholder="其他充值金额" v-model="inputMony" @focus="inputFocus" @keydown.native="channelInputLimit">
// bug fix:指定输入类型为number时仍然可以输入字母'e'和小数点'.'(因为也属于数字类型的范围),这里做一下输入限制
channelInputLimit (e) {
let key = e.key
// 不允许输入'e'和'.'
if (key === 'e' || key === '.') {
e.returnValue = false
return false
}
return true
}