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

2021年09月16日 阅读数:7
这篇文章主要向大家介绍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".
上层的字体颜色设置成透明,上层负责输入绑定事件,下层负责显示文本.javascript

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