如何通过EventListener仅在输入框前添加单个美元符号？

你的问题出在每次触发keyup事件时，都直接把$拼在输入框内容前面，导致每输入一个字符就多一个$。比如输入1变成$1，再输入2就会变成$$12，显然不符合需求。

这里给你两种解决方案：

基础版：确保开头始终只有一个$ #

直接处理输入内容，先去掉开头所有的$，再重新拼接一个在最前面，这样不管怎么操作，开头只会保留一个$：

let dol = document.querySelector('#dollar');

dol.addEventListener('keyup', function(e) {
  // 移除开头所有连续的$符号
  const cleanValue = dol.value.replace(/^\$+/, '');
  // 重新添加单个$在开头
  dol.value = "$" + cleanValue;
});

优化版：保留光标位置（更友好的体验） #

上面的基础版会导致输入时光标跳到末尾，影响用户体验。可以记录光标位置，处理完内容后恢复光标位置：

let dol = document.querySelector('#dollar');

dol.addEventListener('keyup', function(e) {
  // 记录当前光标位置
  const cursorPos = dol.selectionStart;
  const originalValue = dol.value;
  
  // 清理开头的$符号
  const cleanValue = originalValue.replace(/^\$+/, '');
  const newValue = "$" + cleanValue;
  
  // 只有内容变化时才更新，避免不必要的光标调整
  if (newValue !== originalValue) {
    dol.value = newValue;
    // 计算新的光标位置：保持原光标相对位置不变
    const newCursorPos = cursorPos + (newValue.length - originalValue.length);
    dol.setSelectionRange(newCursorPos, newCursorPos);
  }
});

如果是金额输入场景，你还可以额外添加逻辑限制用户输入非数字/小数点的字符，不过这属于扩展需求，可根据实际情况调整。

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