wxml

<!-- 禮品卡卡號 --> <view class="lb1"><view class="lb2">禮品卡卡號</view><view class="lb3"><input class="weui-input" name="number" placeholder-style='color:#ACACAC' placeholder="請輸入卡號"value='{{number}}' bindinput="Number"/></view> </view>

js

// 輸入卡號四位一組Number:function(e){var card = e.detail.value;var cursor = e.detail.value;var card = card.replace(/\s/g, '').replace(/[^\d]/g, '').replace(/(\d{4})(?=\d)/g, '$1 ');var cursor=cursor.replace(/[, ]/g,'') //取消空格this.setData({number: card})},// 手機號空格模式(uni-app運行)var phone ='15990984567'this.phone=phone .replace(/\D/g,'').replace(/^/,'$& ').replace(/....(?!$)/g,'$& ')console.log( this.phone );//159 9098 4567

wxss

.lb1{width: 100%;height: 98rpx;border-bottom: 3rpx solid #EAEAEA;display: flex;align-items: center;justify-content: space-around;background: #fff; }.lb2{width: 40%;height: 94rpx;line-height: 94rpx;font-size: 30rpx;color: #333333;} .lb3{width: auto;height: 94rpx;line-height: 94rpx;color: #ACACAC;display: flex;align-items: center;} .weui-input{width: 335rpx;height: 90rpx;font-size: 28rpx;text-align: right;color: #ACACAC; }

總結

以上是生活随笔為你收集整理的uni-app-微信小程序实现输入卡号 每四个为一组中间为空格（也可以取消空格）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。