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

q3qa4bjr 于 2023-06-25 发布在其他

关注(0)|答案(2)|浏览(150)

我试图实现一个功能，当用户选择一个文本，用户可以改变文本的颜色使用颜色选择器，这种改变应该是永久的，直到他/她再次选择文本改变颜色。我能够改变整个文本的颜色，但不能弄清楚如何改变选择文本。我在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>

css

来源：https://stackoverflow.com/questions/68233458/how-to-change-the-color-of-selected-text-using-color-picker

2条答案

按热度按时间

wswtfjt71#

你基本上是在那里，除了这是一个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>

赞(0）回复(0）举报 2023-06-25

fnvucqvd2#

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>

赞(0）回复(0）举报 2023-06-25

我来回答

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

2条答案

相关问题

热门标签

最新问答