如何在MUI多行TextField中输入制表符并禁用Tab键导航功能？

核心思路是监听多行输入框的键盘按下事件，拦截Tab键的默认焦点跳转逻辑，手动在光标位置插入制表符并更新光标位置。 #

基础实现步骤 #

• 给MUI TextField绑定onKeyDown事件，判断是否为单独按下Tab键的场景（排除带Ctrl/Alt/Command等修饰键的组合快捷键，避免和系统/浏览器全局快捷键冲突）
• 调用e.preventDefault()禁用Tab键默认的页面焦点导航行为
• 获取原生textarea元素的当前光标起止位置，在对应位置插入制表符\t，更新输入框绑定的状态值
• 状态更新后将光标偏移到插入的制表符之后，避免光标自动跳转到文本末尾

完整代码示例 #

import { TextField } from '@mui/material';
import { useState } from 'react';

function JsonTextInput() {
  const [inputValue, setInputValue] = useState('');

  const handleKeyDown = (e) => {
    // 仅拦截单独按Tab的操作，不影响带修饰键的组合快捷键
    if (e.key === 'Tab' && !e.ctrlKey && !e.metaKey && !e.altKey) {
      e.preventDefault();
      const textareaDom = e.target;
      const cursorStart = textareaDom.selectionStart;
      const cursorEnd = textareaDom.selectionEnd;

      // 插入制表符，也可以替换为4个空格实现空格缩进
      const updatedValue = inputValue.substring(0, cursorStart) + '\t' + inputValue.substring(cursorEnd);
      setInputValue(updatedValue);

      // 等待状态更新后调整光标位置
      setTimeout(() => {
        textareaDom.selectionStart = textareaDom.selectionEnd = cursorStart + 1;
      }, 0);
    }
  };

  return (
    <TextField
      multiline
      rows={12}
      value={inputValue}
      onChange={(e) => setInputValue(e.target.value)}
      onKeyDown={handleKeyDown}
      label="JSON内容输入"
      variant="outlined"
      fullWidth
    />
  );
}

可选优化点 #

• 支持选中多行批量缩进：可判断选中文本中是否包含换行符，按Tab时给每一行开头插入制表符，按Shift+Tab时移除每行开头的制表符/缩进空格，符合代码编辑器的交互习惯
• 自定义缩进宽度：如果不需要制表符缩进，可将代码中的'\t'替换为' '即可实现4个空格的缩进效果

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