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

我正在尝试实现一个功能，当用户选择文本时，用户可以使用颜色选择器更改文本的颜色，这种更改应该是永久性的，直到他/她再次选择文本并更改颜色。我可以更改整个文本的颜色，但不知道如何更改所选文本。我在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>

除了这是颜色选择器上的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>

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>

相关内容

最新更新

热门标签：