uniapp下type为digit的输入框在后面显示固定文字

效果

在这里插入图片描述

实现思路

<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”.
上层的字体颜色设置成透明,上层负责输入绑定事件,下层负责显示文本.

// 金额获取焦点,去掉后缀:元
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 += "元"
		})
	}
}