首頁猿問更改 div 中所選文本的字體顏色

更改 div 中所選文本的字體顏色

JavaScript

楊__羊羊 2022-08-27 14:59:37

我有一個事件監聽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>因此，如果用戶在其中選擇了一些文本，我應該用一些字體顏色標記它。字體顏色應永久粘貼文本。所以我不能使用：：選擇。提前致謝

查看完整描述

3 回答

萬千封印

TA貢獻1891條經驗獲得超3個贊

我認為你需要的是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… 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>

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>

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

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

反對回復 2022-08-27

慕運維8079593

TA貢獻1876條經驗獲得超5個贊

最后，經過一天的谷歌搜索，我能夠實現這一目標。萬一將來有人需要這個: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

反對回復 2022-08-27

慕田峪4524236

TA貢獻1875條經驗獲得超5個贊

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

::selection {

color: red;

background: yellow;

}

反對回復 2022-08-27

3 回答
0 關注
173 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

更改 div 中所選文本的字體顏色

更改 div 中所選文本的字體顏色

3 回答

添加回答