用户使用 JavaScript 输入 X 字符后更改输入颜色

Question

我正在尝试进行输入，用户在其中键入文本。 我要做的是：用户输入 10 个字符后，他们输入的下一个字符将是另一种颜色。 有谁知道我该怎么做？

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

以下是示例代码，我想在用户输入 10 个字符并更改其颜色后获取此文本。

Answer 1

无法为输入元素的文本着色部分，因为用于部分字符串的唯一 CSS 选择器是::first-letter 。 就像@APAD1 的评论所说，可以创建一个 带有contenteditable的元素，它会自动将接下来的 10 个字符包装在带有自定义样式集的span标签中。