Angular中input处理超大数字：保留微调框且避免精度丢失方案问询

完全可行，核心思路是用type="text"输入框保证精度，同时通过自定义UI和Angular逻辑模拟原生微调框的功能，具体实现步骤如下：

1. 构建带微调按钮的输入布局 #

用容器包裹文本输入框和自定义增减按钮，通过CSS让整体样式贴近原生number输入框：

<div class="number-input-container">
  <input 
    type="text" 
    [(ngModel)]="bigNumber" 
    (input)="validateInput()"
    placeholder="输入超大数字"
  />
  <div class="spinner-buttons">
    <button (click)="increment()">↑</button>
    <button (click)="decrement()">↓</button>
  </div>
</div>

对应的CSS：

.number-input-container {
  position: relative;
  display: inline-block;
}

.number-input-container input {
  padding-right: 30px; /* 给微调按钮留空间 */
  width: 200px;
  box-sizing: border-box;
}

.spinner-buttons {
  position: absolute;
  right: 2px;
  top: 2px;
  bottom: 2px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.spinner-buttons button {
  border: none;
  background: #eee;
  padding: 0 5px;
  cursor: pointer;
  font-size: 10px;
}

2. 实现高精度的增减逻辑 #

在Angular组件类中用BigInt处理超大数字运算（避免精度丢失），同时维护输入框的字符串值：

import { Component } from '@angular/core';

@Component({
  selector: 'app-big-number-input',
  templateUrl: './big-number-input.component.html',
  styleUrls: ['./big-number-input.component.css']
})
export class BigNumberInputComponent {
  bigNumber: string = '';

  increment() {
    if (!this.bigNumber) {
      this.bigNumber = '1';
      return;
    }
    try {
      const num = BigInt(this.bigNumber);
      this.bigNumber = (num + 1n).toString();
    } catch (e) {
      this.bigNumber = '';
    }
  }

  decrement() {
    if (!this.bigNumber) return;
    try {
      const num = BigInt(this.bigNumber);
      if (num > 0n) {
        this.bigNumber = (num - 1n).toString();
      }
    } catch (e) {
      this.bigNumber = '';
    }
  }

  validateInput() {
    // 过滤非数字字符
    this.bigNumber = this.bigNumber.replace(/[^0-9]/g, '');
  }
}

3. 额外优化点 #

• 若需支持负数，可修改验证逻辑，允许输入负号并调整增减逻辑
• 给输入框添加焦点事件，优化微调按钮的hover样式，更贴近原生体验
• 可将该功能封装为Angular指令或独立组件，方便项目内复用

这个方案既保留了文本输入框的高精度特性，又通过自定义按钮实现了和原生微调框一致的操作体验，完全解决精度丢失与功能缺失的问题。

内容的提问来源于stack exchange，提问作者Sunny