Change color of specific characters in contenteditable div whilst inputting data

Question

Hello! And thank you for taking the time in reading this, and apologies that it is this long. TL;DR at the bottom.

What I am trying to accomplish:

What I wish to accomplish is to be able to change the color of a specific character as it's being typed into a element that has the contenteditable attribute. In other words and as an example, say that one is to type: "Hello [World]!", well, I would like that as soon as the character '[' and ']' are typed, that they instantly change color to red, but only the letter those.

What I have tried so far:

What I have tried are two things, using the div.keyup(); and div.keypress(); methods and using the id of the key that was given to try and change the text but I have encountered two problems so far.

The div.keyup(); method: This one I used since it was the easiest to change the text as soon as it was written. Once the user released the key, it was supposed to change color, since the symbol would have been already inputted it would have been easier to edit. But, consider this:

    $(function() {

      var inp = $("#inputDiv");

      inp.keyup(function(e) {
        switch (e.which) {

          //222 is the id for the key where the '[' is located on.
          case 222:
            //Unimportant for example
            break;

            //191 is the id for the key where the ']' is located on.
          case 191:
            //Unimportant for example
            break;

          default:
            //Unimportant for example
        }

      });
    });

The issue I find is that when the key for '[' is pressed, there is no way to detect whether it was the bracket or any of the other symbols assigned for that key. Same occurs with the ']' key. So I have tried counting how many ms it took between the shift (id:16) key being pressed before the 222 key was pressed, yet I haven't managed to make it work.

The keypress() method: This one I used it as an alternative form, since the e.which returns the ascii value of the character that was inputted as soon as the key is pressed, which is useful since I wouldn't have to see if shift + 222/191 is being pressed, instead just detect when the character I want has been pressed. The code would be same as the example before, but with the ids changed appropriately. However, what occurs is that as soon as they are pressed, and I append the new '[' or ']' that has the color change class/attribute (<span class="bracket" [or] style="color:#F00;">[</span>), instead of just one '[' appearing, two appear and I can only type within the span, so all text I input thereafter is red as well, which is not as intended.

TL;DR:

I wish to change the color of the characters '[', ']' and '/' as soon as they are inputted into a with the contenteditable attribute.

At this point, I do not know what to do or if there is another better way to do it or if there even is a way/workaround. So, I'd ask if you could perhaps share some of your wisdom with me? I'm sure this might be easy for some, but I just retook coding not so long ago and I forgot everything by now, so apologize in advance, as well, thank you for your patience and taking the time to read this! :D

Im sure you can use some svg color font for those 3 glyphs, no need for script at all. — skobaljic, Sep 26 '21 at 09:50
https://stackoverflow.com/questions/1846599/how-to-find-out-what-character-key-is-pressed has answers for vanilla JS and jQuery that seem to work perfectly. Just place the cursor behind the span after that (setSelectionRange) — Simon, Feb 21 '22 at 09:37

score 0 · Answer 1 · answered Sep 26 '21 at 07:51

0

I think you can do a workaround like below:

<span class="red-bracket">
   [
   <span class="color-white">
       <!-- and user input goes here -->
   </span>
</span>

answered Sep 26 '21 at 07:51

Agil Atakishiyev

926
2
9
16

Thank you for replying! But although that might be a good workaround, the question of how do I properly make it so that those classes are added the moment the user inputs the desired characters still remains I'm afraid, but thank you nonetheless! – Alastair Sep 26 '21 at 07:57
can you share some [codeSandbox snippet](https://codesandbox.io/) so i can help better. from the question i could not recreate the proper environment as yours – Agil Atakishiyev Sep 26 '21 at 08:11

Change color of specific characters in contenteditable div whilst inputting data

Hello! And thank you for taking the time in reading this, and apologies that it is this long. TL;DR at the bottom.

What I am trying to accomplish:

What I have tried so far:

TL;DR:

1 Answers1