微信小程序-支付输入金额完美处理解决方法

最新推荐文章于 2024-07-13 16:55:06 发布

pf_82

最新推荐文章于 2024-07-13 16:55:06 发布

阅读量1.7k

点赞数 1

CC 4.0 BY-SA版权

文章标签：小程序 javascript jquery json

本文链接：https://blog.youkuaiyun.com/pf_82/article/details/121361238

本文介绍了如何在微信小程序中实现支付金额的完美输入处理，包括限制小数点后两位，防止小数点位于首位，以及失去焦点时自动格式化金额的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用keyCode实现金额的输入处理，包括小数点后两位处理，小数点在首位，失去焦点格式化金额。

Wxml页面：

<view class="main">
  <view class="content">
    <view class="money_icon">￥</view>
    <view class="money_input">
      <input type="digit" value="{
  
  {total_amount}}" placeholder="请输入支付金额" placeholder-class="placeholder" focus="true" maxlength="10" selection-start="{
  
  {SelectionStart}}" selection-end="{
  
  {SelectionEnd}}" bindinput="TotalAmount_input" bindblur="TotalAmount_blur" bindconfirm="TotalAmount_confirm" />
    </view>
  </view>
</view>

JS：

data: {
    total_amount: ''
  },
  TotalAmount_input(e) {
    let _this = this;
    let cursor = e.detail.cursor - 1;
    let keyCode = e.detail.keyCode;
    let keyValue = e.detail.value;
    _this.formatMoney(cursor, keyCode, keyValue);
  },
  formatMoney(c, k, v) {
    let _this = this;