title: How to show blinking text cursor/caret in a read-only div
body: <p>How can I show a blinking cursor (allowing for text selection via keyboard) in a div but keep it read-only (disallowing text input)?</p>
  
  <p>I know I can set <code>contentEditable</code> to enable the cursor on a div but then users can edit the contents. I've tried adding both <code>contentEditable</code> and <code>readonly</code> to the div but it seems <code>readonly</code> is only effective on input elements, like textarea or input.</p>
  
  <p>I also have tried using a textarea and setting it to readonly so it shows the cursor but doesn't allow text input, like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;textarea readonly&gt;Go ahead and move the cursor here but don't try to add text&lt;/textarea&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is the functionality I'm looking for but I want to do this with a div or some other non-input element. I'm open to using 3rd party libraries.</p>
  
  <hr>
  
  <p><strong>Note:</strong> "Cursor" or "caret" here is referring to the blinking lines that indicates where text selection starts/ends.</p>