方案一:
因為方案二會有一個問題,就是不能保留兩位小數(shù)點,也就是金額的角和分,而且如果輸入法是中文輸入,然后按下切換中英文鍵shift
,會發(fā)現(xiàn)可以輸入英文字母,顯然是有問題的,以下方案可以解決這兩個問題。
<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, ''))">
方案二:
當實現(xiàn)充值功能時,使用<el-input>進行金額輸入,所以需要將type設(shè)置為number類型,但是會發(fā)現(xiàn),字母e
和小數(shù)點.
還是可以輸入,為了達到限制輸入,需要做以下處理。
<el-input size="medium" type="number" placeholder="其他充值金額" v-model="inputMony" @focus="inputFocus" @keydown.native="channelInputLimit">
// bug fix:指定輸入類型為number時仍然可以輸入字母'e'和小數(shù)點'.'(因為也屬于數(shù)字類型的范圍),這里做一下輸入限制
channelInputLimit (e) {
let key = e.key
// 不允許輸入'e'和'.'
if (key === 'e' || key === '.') {
e.returnValue = false
return false
}
return true
}