How to set different color for each letter in a text field using jQuery ?

Last Updated : 18 May, 2021

In this article, we will find how to set a different color for each letter in a text field using jQuery?

Approach:

To do this we will have to change the color of text whenever the user enters a letter using the keyboard. For this, we will use onkeydown event that triggers whenever the user presses a key on the keyboard.

Syntax:

object.onkeydown = function(){Script}

Example: Let us look at an example to find how to set a different color for each letter in a text field using jQuery onkeydown event.

HTML

<!DOCTYPE html>
<html>
  <head>
    <script src=
"https://code.jquery.com/jquery-3.5.0.js">
    </script>
  </head>
  <style>
    div {
      border: 1px solid black;
      margin-top: 40px;
      margin-left: 250px;
      margin-right: 250px;
    }
  </style>
  <body style="text-align: center">
    <h2 style="color: green">GeeksforGeeks</h2>
    <div id="input"></div>
    <script>
      function setRange(text) {
        var r, s;
        if (document.createRange) {
          r = document.createRange();
          r.selectNodeContents(text);
          r.collapse(false);
          s = window.getSelection();
          s.removeAllRanges();
          s.addRange(r);
        }
      }

      // Selecting input tag and applying css to each word
      $("#input")
        .prop("contentEditable", true)
        .on("input", function () {
          $(this)
            .contents()
            .each(function () {
              var content = this;
              $.each($(this).text().split(""), function () {

                // Generating random color each time
                var color = "#" + ((Math.random() * 16777215) | 0).toString(16);
                $("<span>")
                  .text(this)
                  .css({ color: color })
                  .insertBefore(content);
              });
              $(this).remove();
            });

          // Function to set the end of the text content
          setRange($("#input"));
        });
    </script>
  </body>
</html>

Output:

Change color of text using keydown event

How to create a Color Input using jQuery Mobile ?

faizamu19

Improve

Article Tags :

How to set different color for each letter in a text field using jQuery ?

Similar Reads

Thank You!

What kind of Experience do you want to share?