用css单击div时丢失contenteditable中的选定文本select-none: [英] Losing selected text from contenteditable on clicking div with css user-select: none;
问题描述
我正在开发一个JavaScript富文本编辑器。而不是按钮,我用css属性 user-select:none
来使用div。这在Firefox中运行良好,但问题出在Google Chrome 。
I'm developing a JavaScript rich text editor. Instead of buttons, I'm using div with css property user-select: none
. This works fine in Firefox but problem is with Google Chrome.
当我用css user-select :none
,我将失去contenteditable div中的选定文本。 Html和CSS在下面给出
When I click on div with css user-select: none
, I'm losing the selected text from contenteditable div. Html and css is given below
<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中正常运行:
如何禁用文本选择使用jQuery?
I have a similar setup, and the following solution works fine in Chrome: How to disable text selection using jQuery?
答案是为'selectstart'事件添加一个处理程序。
The answer is to add a handler for the 'selectstart' event.
这篇关于用css单击div时丢失contenteditable中的选定文本select-none:的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!