如何在只读div中显示闪烁的文本光标/插入符号

Question

How can I show a blinking cursor (allowing for text selection via keyboard) in a div but keep it read-only (disallowing text input)?

I know I can set contentEditable to enable the cursor on a div but then users can edit the contents. I've tried adding both contentEditable and readonly to the div but it seems readonly is only effective on input elements, like textarea or input.

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:

 <textarea readonly>Go ahead and move the cursor here but don't try to add text</textarea> 

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.

---

Note: "Cursor" or "caret" here is referring to the blinking lines that indicates where text selection starts/ends.

Answer 1

Here you go :) . All you need to do is disable cut/copy/paste and key press events.

 <div contenteditable="true" oncut="return false" onpaste="return false" onkeydown="return false;" style="user-drag: none;" ondragenter="return false;" ondragleave="return false;" ondragover="return false;" ondrop="return false;"> Inner content </div> 

Answer 2

In Vanilla JavaScript, This is the simplest example of how you can go about doing it. I am using a class here, but as other answers showed, you could change it to an actual attribute or whatever suits your linking.

  const uneditables = Array.from( document.querySelectorAll(".editable-but-not-really") ); const doNothing = e => e.preventDefault(); uneditables.forEach(element => { element.setAttribute("contentEditable", true); element.addEventListener("oncut", doNothing, false); element.addEventListener("onpaste", doNothing, false); element.addEventListener("keydown", doNothing, false); }); 

 <div class="editable-but-not-really">I am here to stay</div> <div class="editable-but-not-really">You cannot edit me</div> <div class="editable-but-not-really">I was born to stay</div> <div class="editable-but-not-really">As I am, and I don't</div> <div class="editable-but-not-really">want anything to do with</div> <div class="editable-but-not-really">your stinky pointer</div>