时间戳

首页 > 解决方案 > 禁用光标单击而不阻止突出显示

javascript - 禁用光标单击而不阻止突出显示

问题描述

我正在制作一个类似打字机的网站（here），它使用 textarea 和 javascript（通过按钮单击）从 textarea 中添加/删除。

在遵循这 2 个答案（1、2）之后，我现在使用默认输入指示器来显示文本位置。

为了防止用户在textarea我添加pointer-events:none到textarea的 css 中的其他位置单击，但这也阻止了突出显示部分或全部文本以手动复制它。

这是文本区域

<textarea id="textarea" class="textarea" data-gramm_editor="false" data-gramm="false">
</textarea>

有了这个 CSS

.textarea {
    pointer-events:none;
    font-size: 23px;
    width: 100%;
    height: 150px;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: #f8f8f8;
    resize: none;
    }

视觉解释：我希望能够像这样选择而不能单击并执行此操作。

有没有办法将点击和突出显示分开并且只阻止点击？

如果解决方案无法在移动设备上顺利运行，但仍然可以，只需指出/解释即可。

标签： javascripthtmlcss

解决方案

好的，我编辑了我之前的答案：

如果我理解正确，您希望保持突出显示（选择文本）但不要让用户在文本区域上移动光标。如果是这种情况，那么你可以做这样的事情。首先让我们删除

pointer-events:none;

然后readonly在textarea上添加

例子：

<textarea readonly id="textarea" class="textarea" data-gramm_editor="false" data-gramm="false">
</textarea>

注意：一般避免使用pointer-events: none它会禁用高亮和选择以及光标样式。

现在在你的情况下（有活动选择，有光标活动，不要让用户在 textarea 中移动光标），你可以做类似的事情，你可以使用 adiv代替textarea并编辑该 div 的 inneHTML。如您所见，我创建了一个光标，它是 html 元素，它类似于真正的光标。通过这样做，您可以更好地控制键盘，希望对您有所帮助。一般来说，只用它是不可能实现你想要的一切的textarea。

const editable = document.getElementById('editableC');

addCursor()

const buttons = document.querySelectorAll('button');

buttons.forEach(el =>
  el.addEventListener('click', event => {
    removeCursor();
    const letter = event.target.innerHTML;
    if (letter === 'clear') {
      editable.innerHTML = editable.innerHTML.slice(0, -1);
    }else {
      editable.innerHTML += letter;
    }
    addCursor()
  })
);


function addCursor(){
  let span = document.createElement('span');
  span.classList.add('blinking-cursor');
  let text = document.createTextNode('|');
  span.appendChild(text);
  editable.appendChild(span);
}

function removeCursor(){
  const span = editable.querySelector('span')
  span.remove()

}
.editableC {
  width: 300px;
  height: 100px;
  border: 1px solid #ccc;
  padding: 5px;
  word-break: break-all;
  
}

.blinking-cursor {
    user-select: none;
        -moz-user-select: none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -o-user-select: none;
  font-size: 18px;
  margin-left: 2px;
  color:red;
  -webkit-animation: 1s blink step-end infinite;
  -moz-animation: 1s blink step-end infinite;
  -ms-animation: 1s blink step-end infinite;
  -o-animation: 1s blink step-end infinite;
  animation: 1s blink step-end infinite;
}

@keyframes "blink" {
  from,
  to {
    color: transparent;
  }
  50% {
    color: red;
  }
}

@-moz-keyframes blink {
  from,
  to {
    color: transparent;
  }
  50% {
    color: red;
  }
}

@-webkit-keyframes "blink" {
  from,
  to {
    color: transparent;
  }
  50% {
    color: red;
  }
}

@-ms-keyframes "blink" {
  from,
  to {
    color: transparent;
  }
  50% {
    color: red;
  }
}

@-o-keyframes "blink" {
  from,
  to {
    color: transparent;
  }
  50% {
    color: red;
  }
}
<div id="editableC" class="editableC"></div>

<div style="margin-top:10px">
  <button>A</button>
  <button>B</button>
  <button>clear</button>
</div>

推荐阅读