1

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. 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>
Nitin Saini
  • 507
  • 2
  • 10
  • 26
  • Why this `setInterval`? Simply use the `input` event. Inline event handlers like `onclick` are [not recommended](/q/11737873/4642212). They are an [obsolete, hard-to-maintain and unintuitive](/a/43459991/4642212) way of registering events. Always [use `addEventListener`](//developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these) or jQuery’s [`.on`](//api.jquery.com/on/) instead. – Sebastian Simon Jul 03 '21 at 05:32

2 Answers2

3

you were basically there except this was an input event on the color picker

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>
Kinglish
  • 23,358
  • 3
  • 22
  • 43
  • You are great, that's what I wanted. but there is one bug when I change the color of text and then change it again then sometimes It changes and sometimes it not. – Nitin Saini Jul 03 '21 at 06:56
  • This code changes the color of the selected text when running it for the first time. But on subsequent run (when the base color is changed through slider), it changes the color when the color is picked for the 2nd time only. – Saumya Prakash Mishra Jul 04 '21 at 05:42
0

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>
pullidea-dev
  • 1,768
  • 1
  • 7
  • 23