时间戳

首页 > 解决方案 > 如果数据属性（HTML）=== javascript 中的输入文本，如何更改已写入输入的每个字母的 javascript 颜色？

javascript - 如果数据属性（HTML）=== javascript 中的输入文本，如何更改已写入输入的每个字母的 javascript 颜色？

问题描述

如果数据属性 === Javascript 中的输入文本，您能告诉我如何更改已写入（按正确顺序）输入列中的每个字母的颜色（绿色是正确的，红色是错误的） ？

我的意思是如果 data="word" 输入值="word"例子

当我写 w - 字母颜色为绿色时，字母颜色为红色。

wo -stay green else red;
wor - green else red;
word -green else red;

我的代码在这里：

let all = document.querySelectorAll('#input_Text')
all.forEach(element => element.addEventListener('input',(e)=>{
    if(e.target.value === element.getAttribute('data-verb')){
    element.style.border = "5px solid green"
    
    }else{element.style.border = "5px solid red"};
    }));

多谢

标签： javascript

解决方案

如果元素的值String.prototype.startsWith()输入的文本，您可以使用Document.querySelectorAll()获取所有输入元素'input[data-verb]'并附加一个input事件以设置样式边框：

document
  .querySelectorAll('input[data-verb]')
  .forEach(el => el.addEventListener('input', ({ target: { value }}) => {
    const color = el.getAttribute('data-verb').startsWith(value) ? 'green' : 'red'
    el.style.border = `5px solid ${color}`
  }))
<input type="text" data-verb="word">

推荐阅读