如何用鼠标在Inputmask的currency别名下输入小于1美元的带小数金额

针对你使用RobinHerbots Inputmask时遇到的问题——输入小于1美元的金额需要手动输入小数点，这里提供直接的实现思路：

核心逻辑是监听输入框的点击事件，判断点击位置是否落在小数位区域，若此时输入框为空（或仅含货币符号），自动补全小数点及默认小数位，并将光标定位到小数位输入位置，无需先输入整数。

具体实现步骤及代码 #

1. 初始化货币Inputmask配置
   先按照需求配置基础的货币输入规则：

const currencyInput = document.getElementById('your-currency-input-id');

Inputmask({
  mask: "$num",
  num: {
    prefix: "$",
    digits: 2,
    digitsOptional: false,
    decimalSeparator: ".",
    groupSeparator: ",",
    allowMinus: false
  },
  clearMaskOnLostFocus: false // 保持输入框的货币符号，避免空值
}).mask(currencyInput);

2. 添加点击事件监听处理小数位激活
   通过判断点击位置与输入框宽度的比例（或更精准的字符位置），触发自动补全逻辑：

currencyInput.addEventListener('click', function(e) {
  const inputEl = this;
  const inputRect = inputEl.getBoundingClientRect();
  const clickX = e.clientX - inputRect.left;
  const totalWidth = inputRect.width;
  
  // 估算小数位区域的起始位置（可根据输入框样式调整比例，比如0.6即前60%是整数位，后40%是小数位）
  const decimalAreaStart = totalWidth * 0.6;
  
  // 当点击小数位区域且输入框仅含货币符号时
  if (clickX > decimalAreaStart && inputEl.value === "$") {
    inputEl.value = "$0.00";
    // 将光标定位到小数点后第一位（索引为3，对应"$0.00"中第一个0的位置）
    inputEl.setSelectionRange(3, 3);
  }
  
  // 扩展：如果已有整数，点击小数位直接定位到小数位
  if (clickX > decimalAreaStart && inputEl.value.match(/^\$\d+$/)) {
    inputEl.value += ".00";
    const cursorPos = inputEl.value.indexOf(".") + 1;
    inputEl.setSelectionRange(cursorPos, cursorPos);
  }
});

优化说明 #

• 若需要更精准的点击位置判断，可以通过计算输入框内文本的宽度（比如使用Canvas测量字符宽度），来确定小数点的位置对应的坐标，替代比例估算
• 也可以将点击逻辑整合到Inputmask的onClick回调中，避免单独绑定事件，只需在初始化配置中添加onClick函数即可

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