I am facing an issue with a div that contains a textarea. The cursor is automatically positioned at the beginning of the text within the textarea. I would like to disable the mouse cursor when hovering over the textarea but still be able to navigate within the text using keyboard arrows (up, right, down, left).
I attempted to detect if the mouse was over the textarea and then disable the cursor pointer
<div id="hidecursor" style="width: 400px; height: 300px">
<textarea id="startWriting" rows="8" cols="120">
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text ever
since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only
five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with
</textarea>
</div>
document.querySelector("textarea").focus();
document.querySelector("textarea").setSelectionRange(0,0);
document.querySelector("textarea").addEventListener("mouseover", function() {
document.querySelector("textarea").style.pointerEvents = "none";
}, false);
When the mouse hovers over the textarea, the cursor should be disabled. However, moving the cursor using the keyboard arrows should still work.
Any suggestions on how to achieve this?