如何使用顏色選擇器更改所選文本的顏色
[英]How to change the color of selected text using color picker
問題描述
我試圖在用戶選擇文本時實現一項功能，用戶可以使用顏色選擇器更改文本顏色，並且該更改應該是永久性的，直到他/她再次選擇文本更改顏色。 我能夠更改整個文本的顏色，但無法弄清楚如何更改選擇文本。 我在 StackOverflow 上檢查了很多問題，但找不到解決方案。 這是我的文件
var box = document.getElementById('Myelement'); let colorpicker = document.getElementById('ColorPicker1'); setInterval(() => { let color = colorpicker.value; box.style.color = color; }, 200); /* function selectText(hexColor) { var selection = window.getSelection().getRangeAt(0); var selectedText = selection.extractContents(); var span = document.createElement('span'); span.style.color = hexColor; span.className = 'selected-text'; span.appendChild(selectedText); selection.insertNode(span); } function unselectText(){ $('#Myelement').find('.selected-text').contents().unwrap(); } $(document).on('mouseup', function () { selectText('#f90'); }); $(document).on('mousedown', function () { unselectText(); }); */ <html> <head> </head> <body> <p id="Myelement" contenteditable = "true"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> <input name="MyColorPicker" type="color" id="ColorPicker1" /> <script> </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> </body> </html>
2 個解決方案
解決方案1
2 已采納 2021-07-03 05:54:43
你基本上就在那里，除了這是顏色選擇器上的input事件
var box = document.getElementById('Myelement'); let colorpicker = document.getElementById('ColorPicker1'); colorpicker.addEventListener('input', function(e) { selObj = window.getSelection() var selection = window.getSelection().getRangeAt(0); var selectedText = selection.extractContents(); var span = document.createElement('span'); span.style.color = e.target.value; span.className = 'selected-text'; span.appendChild(selectedText); selection.insertNode(span); })
<html> <head> </head> <body> <p id="Myelement" contenteditable="true"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> <input name="MyColorPicker" type="color" id="ColorPicker1" /> <script> </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> </body> </html>
解決方案2
0 2021-07-03 05:29:50
var box = document.getElementById('Myelement'); let colorpicker = document.getElementById('ColorPicker1'); setInterval(() => { let color = colorpicker.value; box.style.setProperty("--check-color", color) }, 200);
p::selection { color: var( --check-color) }
<p id="Myelement" contenteditable="true" onclick="changeColor()"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> <input name="MyColorPicker" type="color" id="ColorPicker1" /> <script> </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
如何使用選擇范圍更改文本區域中選定文本的突出顯示顏色？
[英]How to change the highlight color of selected text in a textarea, using selection range?
如何在不單擊按鈕的情況下使用顏色選擇器更改背景顏色？
[英]How to change background color using color picker without click on button?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.