为何textarea获取为null？Tab键缩进功能实现故障排查

Hey Jamie, let's break down and fix the two issues you're facing here:

1. Why t is returning null #

The core problem is timing: your script is loaded in the <head> section, which runs before the browser finishes rendering the <textarea> element in the <body>. When document.getElementById('txtEditor') executes, that element doesn't exist yet, so it returns null.

Fixes for the null issue #

You have two reliable options here:

• Move your script to the end of the <body>: This ensures the entire DOM is loaded before your JavaScript tries to select elements.
• Wrap your code in a DOMContentLoaded event listener: This tells the browser to run your JS only after all DOM elements are ready.

2. Fixing the Tab key behavior #

Your current code calls e.preventDefault() unconditionally, which blocks all default key actions (like typing text, pressing enter, etc.). We need to only prevent the default when the Tab key is pressed, so other keys work normally.

Full corrected code #

Option 1: Script at end of <body>

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <link rel="stylesheet" href="mystyles.css">
  <meta charset="utf-8">
  <title>Outline editor</title>
  <h1>Outline Editor</h1>
</head>
<body>
  <main class="buttons">
    <button type="button" name="btnSave">Save</button>
    <button type="button" name="btnTF">Text formatting</button>
    <button type="button" name="btnLoad">Load</button>
  </main>
  <main>
    <textarea id="txtEditor" rows="30" cols="80"></textarea>
  </main>

  <!-- Move script here to ensure DOM is ready -->
  <script type="text/javascript">
    let t = document.getElementById('txtEditor');
    function addTextAreaListener() {
      t.addEventListener("keydown", taKeyPress);
    }
    function taKeyPress(e) {
      // Use e.key instead of deprecated keyCode for better readability
      if (e.key === "Tab") {
        e.preventDefault();
        t.value += "     "; // Add 5 spaces
      }
      // Let other keys behave normally
    }
    addTextAreaListener();
  </script>
</body>
</html>

Option 2: Using DOMContentLoaded (if you keep script in <head>)

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <link rel="stylesheet" href="mystyles.css">
  <script type="text/javascript">
    // Wait for the DOM to fully load before running code
    document.addEventListener('DOMContentLoaded', function() {
      let t = document.getElementById('txtEditor');
      function addTextAreaListener() {
        t.addEventListener("keydown", taKeyPress);
      }
      function taKeyPress(e) {
        if (e.key === "Tab") {
          e.preventDefault();
          t.value += "     ";
        }
      }
      addTextAreaListener();
    });
  </script>
  <meta charset="utf-8">
  <title>Outline editor</title>
  <h1>Outline Editor</h1>
</head>
<body>
  <main class="buttons">
    <button type="button" name="btnSave">Save</button>
    <button type="button" name="btnTF">Text formatting</button>
    <button type="button" name="btnLoad">Load</button>
  </main>
  <main>
    <textarea id="txtEditor" rows="30" cols="80"></textarea>
  </main>
</body>
</html>

Quick note #

I swapped e.keyCode == "9" with e.key === "Tab" because keyCode is deprecated, and e.key is more human-readable and future-proof.

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