title: Insert 4 spaces instead of tab
body: <p>I have a <code>contenteditable</code> <code>div</code> with <code>div</code>s inside them like this:</p>
  
  <pre><code>&lt;div id="wrapper" contenteditable=true onkeydown="preventTab(event);"&gt;
    &lt;div id="line1" class="line"&gt;&lt;/div&gt;
    &lt;div id="line2" class="line"&gt;&lt;/div&gt;
    &lt;div id="line3" class="line"&gt;&lt;/div&gt;
    &lt;div id="line4" class="line"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>With CSS, using <code>::before</code> for line numbers , this looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/Zroxd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Zroxd.png" alt="example"></a></p>
  
  <p>Now, I want, whenever someone presses tab, it automatically inserts four spaces instead of a tab. I got this function, but it doesn't do anything after it has fired the events.</p>
  
  <pre><code>function preventTab(event) {
  
      event = event || window.event;
  
      if (event.keyCode === 9) {
  
          // for loop, so the user can set the amount of spaces they want.
          for (let i = 0; i &lt; tabSize; i++) {
              let e = new KeyboardEvent("keydown", {
                  bubbles: true,
                  code: "Space",
                  key: " ",
                  keyCode: 32
              });
  
              event.target.dispatchEvent(e);
          }
  
          event.preventDefault();
      }
  }
  </code></pre>
  
  <p>As I said, nothing really happens (maybe because <code>isTrusted: false</code>?), also no errors are thrown.<br>
  By the way, I have noticed <a href="https://stackoverflow.com/questions/27691291/insert-four-spaces-instead-of-tab">this question</a> with the same title, but that heavily depends on the jQuery library and I'm looking for a pure JavaScript approach.</p>