记录:输入框自动金额格式化(千位符)

1 阅读1分钟

image.png

输入金额:

image.png

失去焦点后展示千位符:

image.png

聚焦时移除千位符:

image.png

HTML代码:

<div className="card-box-title"><img src={icon2} alt="" />新資金額度計算器</div>
    <div className="card-box-subtitle">擬存入新資金</div>
    <div className="input-wrap">
      <div className="input-box">
        <input
          name="amount"
          type="text"
          placeholder="請輸入金額"
          value={this.state.proposedNewFunds || ''}
          onChange={(e) => this.handleAmountChange(e)}
          onBlur={(e) => this.handleAmountBlur(e)}
          onFocus={(e) => this.handleAmountFocus(e)}
          maxLength={20}
        />
        <Select value={currencyCode}  onChange={(val) => this.handleChangeCurrency(val)}>
          {prdtCurrency.localeDictList.map((item) => (
            <Option key={item.value} value={item.value}>
              {item.label}
            </Option>
          ))}
        </Select>
      </div>
      <div className="button-wrap">
        <Button type="primary" style={{ marginRight: '10px' }} disabled={!this.state.proposedNewFunds} onClick={() => this.handleConfirm()}>確認</Button>
        <Button onClick={() => this.handleReset()}>重置</Button>
      </div>
</div>

聚焦、失焦、输入 代码:

  /**
 * 处理金额输入
 */
  handleAmountChange = (event) => {
    let value = event.target.value

    // 只允许数字、小数点和负号
    value = value.replace(/[^\d.-]/g, '')

    // 限制只能有一个小数点
    const parts = value.split('.')
    if (parts.length > 2) {
      value = parts[0] + '.' + parts.slice(1).join('');
    }

    // 更新状态
    this.setState({ proposedNewFunds: value })
  }

  /**
   * 失去焦点时格式化为千分位
   */
  handleAmountBlur = (event) => {
    const value = event.target.value
    if (value !== '') {
      try {
        const numericValue = parseFloat(value)
        if (!isNaN(numericValue)) {
          const formattedValue = numericValue.toLocaleString('zh-CN', {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
          });
          this.setState({ proposedNewFunds: formattedValue })
        }
      } catch (error) {
        console.error('金額格式化出錯:', error)
      }
    }
  }
  /**
   * 获取焦点时显示原始数字
   */
  handleAmountFocus = (event) => {
    const formattedValue = event.target.value;
    // 移除千分位逗号,恢复为纯数字
    const rawValue = formattedValue.replace(/,/g, '');
    this.setState({ proposedNewFunds: rawValue });
  }