如何使用jQuery为文本字段中的每个字母设置不同的颜色

在这篇文章中，我们将发现如何使用jQuery为文本字段中的每个字母设置不同的颜色？

步骤:

要做到这一点，我们必须在用户使用键盘输入一个字母时改变文本的颜色。为此，我们将使用onkeydown事件，每当用户按下键盘上的一个键时就会触发。

语法:

object.onkeydown = function(){Script}

例子：让我们看一个例子，看看如何使用jQuery onkeydown事件为一个文本字段的每个字母设置不同的颜色。

<!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>

输出:

如何使用jQuery为文本字段中的每个字母设置不同的颜色？