title: How to detect if selected text is in an editable area?
body: <h2>The coder's fantasy</h2>
  <p>I created a simple user script to act very quickly on the text I selected. It goes like this:</p>
  <ol>
  <li>I select a word, a website (doesn't have to be a link), or a phrase from, let's say, a <code>p</code> element</li>
  <li>When I press the trigger key, the algorithm will try to figure out if it's a website or text. It will open a tab: if it's a website, that's what it'll load; if it's text, it will google it.</li>
  </ol>
  <h2>The problem shows its ugly head</h2>
  <p>It works great except when I'm editing text. If I'm editing something I've written in a <code>textarea</code>/<code>input</code> it will fire, potentially losing what I wrote. Fortunately, there's usually cache, or even the site will warn me for having unsaved changes, which saves me from losing whatever I wrote. But it's something to fix.</p>
  <h2>The challenge</h2>
  <p>The userscript should only run on text that can't be edited. You'd think it is as easy as not calling the function if the selected text is within a <code>textarea</code>. But there are many ways to display editable content without using classical elements. The &quot;best&quot; filter I've found is to check for <code>document.activeElement.isContentEditable</code>. However, in this very box, that returns <code>false</code>. This is a <code>textarea</code> element, so I can add it to the filter, and I can do so with a few more I can think of. But apart from being an ugly solution, it is not foolproof.</p>
  <p>Besides adding a &quot;did you run me by accident?&quot; prompt, is there a better way to do this?</p>
  <p>Edit: <a href="https://gist.github.com/nmaxcom/80cb59fc7566181a4b923e5983683693" rel="nofollow noreferrer">my current code</a></p>