微信小程序银行卡号输入4位自动加入空格符

最新推荐文章于 2022-08-12 14:32:09 发布

原创最新推荐文章于 2022-08-12 14:32:09 发布 · 466 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#小程序

收录于

该段代码展示了在微信小程序中，如何使用WXML和JS处理银行卡号输入的格式化。当用户输入银行卡号时，代码会实时更新输入值，每输入四个数字添加一个空格，增强用户输入体验。

在这里插入图片描述

wxml

<view>
       <text>银行卡号码</text>
       <input placeholder="输入银行卡号码" type="number" bindinput="bankCardNumber"   value="{{bankCardNumber}}"/>
</view>

Page({
  data: {
    bankCardNumber:" "
  },

bankCardNumber:function(e){
    var yhkd=e.detail.value
    var bankCardNumber = yhkd.replace(/(\d{4})(?=\d)/g, "$1 ");//replace(/\s/g,'');
    this.setData({
      bankCardNumber:bankCardNumber
    })
  }