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 += "元"
			})
		}
	}