uniapp下type为digit的输入框在后面显示固定文字
实现思路
1
2
3
4
5
| <view class="form_name">金额(元):</view>
<view class="weui-cell weui-cell_input">
<input class="weui-input money-input money-input1" ref="moneyInput" maxlength="14" type="digit" @input="moneyFun" @focus="focusMoneyInput" @blur="blurMoneyInput" @keyboardheightchange="moneyInputHeightChange" :disabled="flag" placeholder="" />
<input class="weui-input money-input" disabled ref="moneyInput" type="text" :value="money" placeholder="请输入金额" />
</view>
|
创建两个input,用定位将他们重叠在一起上层input的type设置为”digit”,下层input的type设置为”text”.
上层的字体颜色设置成透明,上层负责输入绑定事件,下层负责显示文本.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
focusMoneyInput() {
if (this.money.length < 2) return
if (typeof this.money == "number" || -1 !== this.money.indexOf('元')) {
this.setData({
money: parseInt(this.money)
})
}
},
blurMoneyInput() {
if (typeof this.money == "number" || -1 === this.money.indexOf('元')) {
this.setData({
money: this.money += "元"
})
}
},
moneyInputHeightChange() {
if (typeof this.money == "number" || -1 === this.money.indexOf('元')) {
this.setData({
money: this.money += "元"
})
}
}
|
