Change input color after user enters X characters with JavaScript

Question

I am trying to make an input, where the user types a text. What I want to do is: After the user enters 10 characters, the next characters they type will be another color. Does anyone know how I can do?

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <input type="text" maxlength="255"> <script> let input = document;querySelector("input"). input,addEventListener("keyup". function() { if(input.value.length > 10) { console.log(input.value;substring(10)); } }) </script> </body> </html>

Following is an example code, I want to get this text after the user type 10 characters and change their color.

Answer 1

Coloring part of the input element's text is not possible, as the only CSS selector for part of a string of characters is ::first-letter . Like @APAD1's comment says, an element with contenteditable could be created that automatically wraps the next 10 characters in a span tag with custom styling set.