Javascript禁用鼠标光标并仅使用键盘光标答案

【问题标题】：Javascript disable mouse cursor and use only keyboard cursorJavascript禁用鼠标光标并仅使用键盘光标
【发布时间】：2019-07-21 09:17:02
【问题描述】：

我有一个 div，在其中，我有一个文本区域，光标位于文本的开头。我想在文本区域禁用鼠标光标，但想使用键盘箭头（向上、向右、向下、顶部）控制文本内的光标。

我已尝试检查鼠标悬停是否禁用光标指针

<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);

当输入鼠标时，光标应该被禁用，但是如果我使用键盘箭头，那么光标应该移动。

有什么想法吗？

【问题讨论】：

CSS cursor: none; 做到了这一点，而 textareas 已经允许你用键盘移动选定的位置，所以应该不需要 JS。
你的意思是指针事件：无；

标签： javascript css

【解决方案1】：

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>

【讨论】：