CODEWITHSUNDEEP
javascriptcss
Binita Gyawali
Binita Gyawali

Reputation: 256

Javascript disable mouse cursor and use only keyboard cursor

I have a div and within that, I have a textarea with the cursor at the beginning of the text. I want to disable the mouse cursor at the textarea but want to control the cursor within the text using keyboard arrows (up, right, down, top).

I have tried to check if the mouseover and 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").addListner("mouseover", function() {
  document.querySelector("textarea").style.pointerEvents = "none";
}, false);

When the mouse is entered, then the cursor should be disabled, however if I use the keyboard arrows, then the cursor should move.

any idea?

Upvotes: 0

Views: 1393

Answers (1)

Andrew Vasylchuk
Andrew Vasylchuk

Reputation: 4779

document.querySelector("textarea").focus();
document.querySelector("textarea").setSelectionRange(0,0);
textarea {
  cursor: none;
  pointer-events: none;
}
<div style="width:400px; height:300px">
  <textarea 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>

Upvotes: 2

Related Questions