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

在本文中，我们将了解如何使用 jQuery 为文本字段中的每个字母设置不同的颜色？

方法：

为此，每当用户使用键盘输入字母时，我们都必须更改文本的颜色。为此，我们将使用onkeydown 每当用户按下键盘上的键时触发的事件。

句法：

object.onkeydown = function(){Script}

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

HTML

  
    
    
  
  
    div {
      border: 1px solid black;
      margin-top: 40px;
      margin-left: 250px;
      margin-right: 250px;
    }
  
  
    GeeksforGeeks
    
    
      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"));
        });
    
  

输出：

使用 keydown 事件更改文本颜色