微信支付红包的金额输入框是专门做了一个键盘吗?
有大神能给出谋划策吗,现在小程序开发,领导希望要一个跟微信红包的金额输入框完全一样的input框,领导有俩要求
1.金额输入框有值的时候前面要紧跟一个“¥”符号,并且根据输入长度进行整体居中
2.键盘就是带小数点的数字键盘
现在采用了两种方案,都失败了
方案一:因为不会动态的居中,就把 “¥”符号放在输入框里面了,做完上真机发现问题,digit 类型input框在获取焦点时会把“¥”符号给过滤掉,失去焦点的时候才会把“¥”显示出来,造成“¥”无法一直显示
<van-row>
<van-col span="24">
<input style="background: #F3F3F3;border-radius: 10px;height: 80rpx;margin-top: 19rpx;" name="arriveMoney" type="digit" placeholder="请输入充值金额" value="{{ arriveMoneyInput }}" maxlength="8" bindinput="moneyInput" bindfocus="moneyFocus"/>
</van-col>
</van-row>
<van-row>
<van-col span="24">
<input value="{{ arriveMoneyShow }}" maxlength="11"readonly/>
</van-col>
</van-row>
js代码
moneyInput(e) {
let arriveMoneyInput = e.detail.value
if(arriveMoneyInput == '¥') {
this.setData({ arriveMoneyInput: '' })
this.setData({ arriveMoneyShow: '¥0.00' })
return
}
if(arriveMoneyInput == '.') {
this.setData({ arriveMoneyInput: '¥0.' })
this.setData({ arriveMoneyShow: '¥0.00' })
return
}
arriveMoneyInput = arriveMoneyInput.replace('¥', '')
const exp = /(^[1-9]([0-9]+)?(\.[0-9]{0,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]{0,2}$)/;
if(exp.test(arriveMoneyInput)) {
let arr = arriveMoneyInput.split('.')
this.setData({ arriveMoneyShow: '¥' + arr[0] + '.' + (!arr[1] ? '00' : arr[1].length == 1 ? (arr[1] + '0') : arr[1]) })
arriveMoneyInput = '¥' + arriveMoneyInput
this.setData({ arriveMoneyInput })
} else {
this.setData({ arriveMoneyInput: this.data.arriveMoneyInput })
}
console.log('this.data.arriveMoneyInput', this.data.arriveMoneyInput)
},
方案二:也考虑过把“¥”符号单独放一个view里面,可是遇到了新的问题,不会实现根据input框输入长度动态进行 “¥”符号与输入框内数字整体的一个居中
<view style="display: flex;align-items: center;justify-content: center;margin-top: 18rpx;background: #F3F3F3;border-radius: 10px;height: 80rpx;">
<view style="line-height: 80rpx;font-size: 40rpx;text-align: right;">¥</view>
<input style="text-align: left;white-space: nowrap;overflow-x: hidden;display: inline-block;max-width: 100%;" name="arriveMoney" type="digit" placeholder="请输入充值金额" value="{{ arriveMoney }}" bindblur="formatMoney" maxlength="7"/>
</view>
js代码
formatMoney(e) {
let arriveMoney = e.detail.value
if(!arriveMoney) {
return
}
try {
const exp = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
if(!arriveMoney || arriveMoney == '0.0' || arriveMoney == '0.00' || arriveMoney <= 0 || !exp.test(arriveMoney)) {
arriveMoney = ''
util.showToastNone('请输入正确的充值金额,最多精确到分')
}
} catch (error) {
arriveMoney = ''
} finally {
this.setData({
arriveMoney
})
}
},
你来个截图看下?听你描述 有点方。
https://developers.weixin.qq.com/s/V879t7m27wyA
上真机后,digit 类型的input框在获取焦点时会把“¥”符号给过滤掉,这样就造成造成“¥”在获取焦点时无法显示
很简单,你在监听数字输入后,在数字前面加个 ¥ 符号;