如何实现选中选项时将空白数字输入转为负数（适配三星用户）

问题核心在于现有代码仅在输入框已有数值时才会转换为负数，当用户先选择负号选项再输入数字时，初始空值无法触发正确的负号绑定。我们需要通过监听输入框的实时输入结合下拉选项的状态，来实现输入自动带负号的效果。

修改思路 #

• 新增变量跟踪下拉选项是否选中负号模式
• 监听输入框的input事件，每次输入时根据负号模式调整数值正负
• 优化下拉选项的change事件，处理现有值的同时更新负号模式状态

完整代码实现 #

HTML（补全select的默认选项）

<input type="number" name="inputAcceleration" id="inputAcceleration">
<select name="unitsAcceleration" id="unitsAcceleration">
  <option value="a">(positive value) + </option>
  <option value="-a">(negative value) - </option>
</select>

JavaScript

const unitsSelect = document.getElementById("unitsAcceleration");
const gravityInput = document.getElementById("inputAcceleration");
// 跟踪是否启用负号模式
let isNegativeMode = false;

// 处理下拉选项切换
unitsSelect.addEventListener("change", () => {
  const unitSelected = unitsSelect.value;
  isNegativeMode = unitSelected === "-a";
  
  // 如果输入框已有值，直接转换正负
  if (gravityInput.value) {
    gravityInput.value = isNegativeMode 
      ? -Math.abs(Number(gravityInput.value)) 
      : Math.abs(Number(gravityInput.value));
  } else {
    // 输入框为空时，清空值（避免残留0）
    gravityInput.value = "";
  }
});

// 监听输入框的实时输入，自动应用负号
gravityInput.addEventListener("input", () => {
  if (!isNegativeMode) return;
  
  const inputValue = Number(gravityInput.value);
  // 避免重复添加负号
  if (inputValue >= 0) {
    gravityInput.value = -Math.abs(inputValue);
  }
});

代码说明 #

• isNegativeMode变量存储当前是否处于负号输入模式
• 下拉切换时，更新模式状态并同步转换现有输入值的正负
• 输入框实时监听输入，只要处于负号模式，就自动将输入的正数转为负数，同时避免重复添加负号（比如用户手动输入负号时不会冲突）

这样无论用户是先选负号再输入，还是先输入再切换负号，都能正常生成负数，完美适配三星用户的数字键盘问题。

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