为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

潇潇雨雨 2021-10-21 16:35:55
我正在尝试进行输入,用户在其中键入文本。我想要做的是:用户输入10个字符后,他们输入的下一个字符将是另一种颜色。有谁知道我该怎么办?<!DOCTYPE html><html><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 个字符并更改其颜色后获取此文本。所以我研究的一种方法是使用“contenteditable div”,但是如何呢?
查看完整描述

2 回答

?
慕无忌1623718

TA贡献1744条经验 获得超4个赞

隐藏输入、onInput 事件处理程序、内容可编辑和 element.html() 的组合如何。对于输入到 contenteditable div 中的每个字符,将该字符保存到隐藏输入,然后将 contenteditable div 的 innerHTML 设置为隐藏输入当前值的前 10 个字符 + 一个带有类名包裹剩余字符的跨度。


查看完整回答
反对 回复 2021-10-21
  • 2 回答
  • 0 关注
  • 143 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信