收藏
回答

微信支付红包的金额输入框是如何实现的?

微信支付红包的金额输入框是专门做了一个键盘吗?

有大神能给出谋划策吗,现在小程序开发,领导希望要一个跟微信红包的金额输入框完全一样的input框,领导有俩要求

1.金额输入框有值的时候前面要紧跟一个“¥”符号,并且根据输入长度进行整体居中

2.键盘就是带小数点的数字键盘

现在采用了两种方案,都失败了

方案一:因为不会动态的居中,就把 “¥”符号放在输入框里面了,做完上真机发现问题,digit 类型input框在获取焦点时会把“”符号给过滤掉,失去焦点的时候才会把“¥”显示出来,造成“¥”无法一直显示

<van-row>

  <van-col span="24">

    <input style="background: #F3F3F3;border-radius: 10px;height: 80rpx;margin-top: 19rpx;name="arriveMoneytype="digitplaceholder="请输入充值金额value="{{ arriveMoneyInput }}" maxlength="8bindinput="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="arriveMoneytype="digitplaceholder="请输入充值金额value="{{ arriveMoney }}" bindblur="formatMoneymaxlength="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

      })

    }

  },


最后一次编辑于  2022-03-22
回答关注问题邀请回答
收藏

2 个回答

  • TNT
    TNT
    2022-03-22

    你来个截图看下?听你描述 有点方。

    2022-03-22
    有用
    回复 12
    查看更多(7)
  • 阿木木
    阿木木
    2022-03-22

    很简单,你在监听数字输入后,在数字前面加个 ¥ 符号;


    2022-03-22
    有用
    回复 1
    • 小乙
      小乙
      发表于移动端
      2022-03-22
      你说的是我的第一种方案,真机上有点小bug
      2022-03-22
      回复
登录 后发表内容