如何在input输入框中输入Tab、LF字符且按Tab不切换焦点

你当前使用的单行<input>控件本身存在两个天然限制：一是默认会把Tab键识别为焦点切换快捷键，不会输入Tab字符；二是单行输入框原生不支持换行符输入，完全没法满足Whitespace语言的编辑需求，按以下两步修改即可：

• 替换基础输入控件
  把原有单行input替换为支持多行输入的textarea标签，这是支持换行输入的基础：

<textarea id="main_input"></textarea>

替换后用户按回车键即可直接输入LF换行符（\n，ASCII码10），不需要额外做事件拦截。

• 添加Tab键拦截逻辑
  给输入控件绑定键盘按下事件，检测到Tab键按下时阻止默认的焦点跳转行为，手动在光标位置插入Tab字符（\t，ASCII码9），同时保证光标位置正常：

const input = document.getElementById('main_input');
input.addEventListener('keydown', function(e) {
  if (e.key === 'Tab') {
    e.preventDefault();
    const cursorStart = this.selectionStart;
    const cursorEnd = this.selectionEnd;
    // 在光标位置插入Tab字符
    this.value = this.value.slice(0, cursorStart) + '\t' + this.value.slice(cursorEnd);
    // 光标移动到插入内容之后，保持正常输入体验
    this.selectionStart = this.selectionEnd = cursorStart + 1;
  }
});

完成以上修改后，Whitespace语言要求的三种核心空白字符都可以正常输入：

• 空格（ASCII 32）：直接按空格键输入
• Tab（ASCII 9）：按Tab键通过上述拦截逻辑输入
• LF换行（ASCII 10）：按回车键直接输入

如果后续需要支持选中多行后按Tab统一缩进的功能，只需要在上述Tab事件逻辑里增加选中文本的判断，逐行插入Tab字符即可扩展。

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