使用 css 用户选择单击 div 时从 contenteditable 中丢失选定的文本：无；答案

【问题标题】：Losing selected text from contenteditable on clicking div with css user-select: none;使用 css 用户选择单击 div 时从 contenteditable 中丢失选定的文本：无；
【发布时间】：2012-08-25 05:21:06
【问题描述】：

我正在开发一个 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;
}

【问题讨论】：

我有类似的设置，以下解决方案在 Chrome 中运行良好：stackoverflow.com/questions/2700000/…
谢谢，问题出在 selectstart 事件上。
没问题。我已经把它作为下面的答案，所以你可以关闭这个问题。

标签： html css google-chrome contenteditable

【解决方案1】：

使用按钮而不是 div 或 span 来制作可点击的链接以更改样式。

然后使用document.execcommand('forecolor',false,'#000000');

【讨论】：

【解决方案2】：

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

答案是为“selectstart”事件添加一个处理程序。

【讨论】：