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

Question

如果数据属性 === 输入文本 in Javascript？

我是说如果数据=“字”输入值="单词"

当我写 w - letter color is green else letter color red.

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"};
    }));

非常感谢

Answer 1

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

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