Question

我正在开发一个JavaScript富文本编辑器。而不是按钮，我使用div与css属性user-select: none。这在Firefox中运行良好，但问题在于Google Chrome 。

当我点击带有css user-select: none的div时，我将从contenteditable div中丢失所选文本。 Html和css在下面给出

<div id="editor">
   <div id="controls">
      <div id="button-bold"></div>
   </div>
   <div id="rte" contenteditable></div>
</div>

CSS

#button-bold
{
    width: 20px;
    height: 20px;
    padding: 2px;
    float: left;
    border: 1px solid #E7E7E5;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#rte {
    width: 100%;
    min-height: 400px;
    margin: 5px;
    outline: none;
}

Answer 1

我有类似的设置，以下解决方案在Chrome中运行良好： How to disable text selection using jQuery?

答案是为'selectstart'事件添加处理程序。

Answer 2

使用按钮代替div或span来制作可点击链接以更改样式。

然后使用document.execcommand（'forecolor'，false，'＃000000'）;

使用css user-select：none;在单击div时从contenteditable中丢失所选文本;

2 个答案: