限制MUI数字输入框中的双负号输入

要实现数字输入框只能输入一个负号，且仅允许在开头输入，同时解决删除负号后无法再次输入的问题，可以通过监听键盘事件和输入事件结合处理：

1. 键盘按键拦截（处理实时输入） #

通过keydown事件判断用户按下负号时的场景，仅允许在开头且无现有负号的情况下输入：

const numInput = document.getElementById('number-input');

numInput.addEventListener('keydown', function(e) {
  // 匹配负号按键（兼容不同键盘的key值）
  if (e.key === '-' || e.keyCode === 189) {
    const currentVal = this.value;
    const cursorPosition = this.selectionStart;
    
    // 已有负号，或光标不在开头时，阻止输入
    if (currentVal.includes('-') || cursorPosition !== 0) {
      e.preventDefault();
    }
  }
});

2. 输入内容修正（处理粘贴等场景） #

仅靠键盘拦截无法覆盖粘贴、右键菜单输入等场景，通过input事件修正输入内容，确保最多只有一个开头负号：

numInput.addEventListener('input', function() {
  // 移除开头外的所有负号，开头多个负号只保留一个
  let correctedVal = this.value.replace(/^(-+)/, '-').replace(/-/g, '');
  // 如果原本开头有负号，重新添加回去
  if (this.value.startsWith('-')) {
    correctedVal = '-' + correctedVal;
  }
  this.value = correctedVal;
});

逻辑说明 #

• 键盘拦截时，只有当输入框无负号且光标在最开头时，才允许输入负号，解决了删除负号后无法重新输入的问题
• 输入修正处理所有非键盘输入场景，确保最终内容符合“最多一个开头负号”的规则

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