繁体   English   中英

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

Change input color after user enters X characters with JavaScript

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我正在尝试输入,用户在其中输入文本。 我想做的是:用户输入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个字符并更改其颜色后获取此文本。

1 个回复

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

2 输入输入X秒钟后更改背景颜色

我有一个contenteditable div,当您键入它时,两秒钟后,我尝试更改其背景颜色。 这是我的代码: 似乎我必须将$(this)传递给函数,因为它无法识别哪个$ this。 当我在按键功能中设置背景颜色更改时,它会起作用。 jsFiddle: http : / ...

3 输入答案后如何在javascript中更改用户输入颜色

我正在尝试根据用户输入的一系列数字来更改用户输入的颜色。 (即超过 100 是红色,75 到 100 是黄色,50 到 75 是黑色,25 到 50 是黄色,任何更少的是红色) 这是我迄今为止尝试过的代码片段... function colorChange() { var pat ...

4 JavaScript 字体颜色根据用户输入更改

所以我有这个小温度转换器。 我想要的只是在高于 30(例如)时将临时字体颜色更改为红色,但我无法完成这项工作。 我将有义务提供任何帮助。 function colorChange(myVal) { var myVal = document.getElementById("fahren ...

6 jQuery:用户开始输入后更改输入值的颜色

我有一个表单输入,其中包含示例搜索关键字。 当用户聚焦输入时,文本消失,如果输入中没有任何内容,则当未聚焦时,文本会重新出现。 一切都很好,而且效果很好,但是我想做的是使示例文本变灰,然后在用户实际键入时具有正常的纯色。 以下是我当前正在使用的代码。 任何帮助将是巨大的! ...

7 从输入更改字符颜色

如果文本框中的输入与富文本框中的输入匹配,我正在尝试更改字符的颜色。 如果匹配,则仅突出显示当前字母。 例如,如果富文本框中的单词是“ balloon”,并且第一个键入的输入是“ b”,它会匹配并更改颜色,但是如果添加了下一个字母“ ba”,该功能将停止工作并且不会更改颜色。 我尝试 ...

8 使用JavaScript更改输入字段焦点的颜色

我正在实现一个HTML输入字段,用户必须在其中输入他的电子邮件地址。 我也在使用JavaScript在同一输入字段上实现验证。 function validateEmail() { var email = document.getElementById('EmailTextbo ...

10 使用 JavaScript 更改输入字段的背景颜色

我正在制作一个表单并使输入字段只能使用 JavaScript 读取。 我想将只读属性的默认颜色更改为绿色或黄色。 HTML 当有人点击女性时,具有 Id 的“年龄”和“电话”的输入变为仅使用 JavaScript 读取。 JS 我想在只读时更改输入字段的颜色。 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM