javascript - 能够在 TextField 中输入制表符吗？

Question

我有一个 MUI TextField即定义为多线。我的目标是输入 JSON 文本。我发现当我按下 tab 键时，我的组件失去了焦点，焦点被转移到屏幕上的下一个组件。我想要的是将制表符值 (\t) 输入到字符串文本中。是否有禁用 Tab 键作为导航工具的方法？

Answer 1

默认情况下，如果您在 input 字段中按 Tab，浏览器会将焦点切换到下一个元素。要覆盖该行为，您可以监听 keydown 事件并调用 e.preventDefault()，然后添加一些代码以在光标位置插入制表符。下面是实现。请注意，因为您正在篡改输入 value，撤消功能不再起作用:

<TextField
  multiline
  onKeyDown={(e) => {
    const { value } = e.target;

    if (e.key === 'Tab') {
      e.preventDefault();

      const cursorPosition = e.target.selectionStart;
      const cursorEndPosition = e.target.selectionEnd;
      const tab = '\t';

      e.target.value =
        value.substring(0, cursorPosition) +
        tab +
        value.substring(cursorEndPosition);

      // if you modify the value programmatically, the cursor is moved
      // to the end of the value, we need to reset it to the correct
      // position again
      e.target.selectionStart = cursorPosition + 1;
      e.target.selectionEnd = cursorPosition + 1;
    }
  }}
/>

现场演示