更改 div 中所选文本的字体颜色

Question

我有一个事件监听div，以便在用户选择文本时发出通知。我通过获得选定的文本，但我也想通过给出字体颜色来标记该特定文本，但不知道如何。我无法向该特定选择范围添加范围。任何想法如何实现这一目标？假设我有div，如下所示mouseUpwindow.getSelectoin().toString()<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laboreet dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laborisnisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velitesse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,sunt in culpa qui officia deserunt mollit anim id est laborum</div>因此，如果用户在其中选择了一些文本，我应该用一些字体颜色标记它。字体颜色应永久粘贴文本。所以我不能使用：：选择。提前致谢

Answer 1

我认为你需要的是CSS，而不是任何JS脚本：

您可以使用属性：::selection

你可以运行下面的代码片段（ 代码参考和更多），希望这会帮助你

.example-color::selection {

  color: #8e44ad;

}

.example-background-color::selection {

  background-color: #f1c40f;

}

.example-background::selection {

  background: #e74c3c;

}

.example-both::selection {

  background-color: #8e44ad;

  color: white;

}

.example-shadow::selection {

  text-shadow: 1px 1px 0 #27ae60;

}

.example-input::selection {

  background: #2ecc71;

}

.example-textarea::selection {

  background: #34495e;

  color: white;

}

body {

  font-family: 'Source Sans Pro', Arial, sans-serif;

  line-height: 1.45;

  background: #E0DCCC;

  color: #333;

  padding: 1em;

  font-size: 18px;

}

p,input,textarea  {

  margin-bottom: 1em;

}

input,textarea {

  display: block;

  font-size: 1em;

  font-family: inherit;

}

<p>Select me to see normal behavior.</p>

<p class='example-color'>Try selecting me for a different text color.</p>

<p class='example-background-color'>You can select me for a different background color.</p>

<p class='example-background'>You can also select me for a different background.</p>

<p class='example-both'>Guess what&hellip; you can select me for a different background color and text color.</p>

<p class='example-shadow'>How about a text-shadow? Sure, select me for a different text-shadow.</p>

<p class='example-background-color'>

  What about nest elements? Select me for a different background color.

  <span class='example-color'>And this sentence is just a color selection.</span>

  Nesting works!

</p>

<input class='example-input' type='text' value='Inputs work!*'>

<textarea class='example-textarea' cols='30' name='' rows='10'>Textarea, too!*</textarea>

<div class='foot-notes'>*not Safari</div>

Answer 2

最后，经过一天的谷歌搜索，我能够实现这一目标。万一将来有人需要这个:P我所做的是 - 使包装器div与内容可编辑真实并使用document.execCommand api进行所需的自定义。注意：但是我不会让用户在下面的处理程序中使用 preventDefault 编辑内容

        onCut={(e)=>e.preventDefault()}

        onPaste={(e)=>e.preventDefault()}

        onKeyPress={(e)=>e.preventDefault()}

        onKeyDown={(e)=>e.preventDefault()}``` Thanks for helping

Answer 3

你可以借助CSS，如果CSS可以处理某些事情，请不要去JS。在样式表中添加此样式

::selection {

    color: red;

    background: yellow;

 }