如何使用颜色选择器更改所选文本的颜色

Question

I am trying to implement a feature when users select a text user can change the color of text using the color picker and that change should be permanent until he/she again selects the text changes the color.我试图在用户选择文本时实现一项功能，用户可以使用颜色选择器更改文本颜色，并且该更改应该是永久性的，直到他/她再次选择文本更改颜色。 I am able to change the color of the whole text but not able to figure out how to change select text.我能够更改整个文本的颜色，但无法弄清楚如何更改选择文本。 I checked a lot of questions on StackOverflow but I am not able to find a solution.我在 StackOverflow 上检查了很多问题，但找不到解决方案。 Here is my file这是我的文件

 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>

Answer 1

you were basically there except this was an input event on the color picker你基本上就在那里，除了这是颜色选择器上的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>

Answer 2

 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>

如何使用颜色选择器更改所选文本的颜色

问题描述

2 个解决方案

解决方案1
2 已采纳 2021-07-03 05:54:43

解决方案2
0 2021-07-03 05:29:50

如何使用颜色选择器更改所选文本的颜色

问题描述

2 个解决方案

解决方案1 2 已采纳 2021-07-03 05:54:43

解决方案2 0 2021-07-03 05:29:50

解决方案1
2 已采纳 2021-07-03 05:54:43

解决方案2
0 2021-07-03 05:29:50