vanilla javascript中的ng touch等价物

Question

当按要求指定初始表单字段时，我将它们设置为红色，而css是

 input:invalid
{
  box-shadow: 0 0 5px 1px red;
}

我只想在vanilla JavaScript中触及它们时突出显示它们。

Answer 1

您应该先听输入的焦点事件，然后再听模糊事件。在模糊事件之后，您应该将“touch”这样的类应用于输入，您必须将其用作CSS中的选择器。

null

var inputs = document.getElementsByTagName("input");

function blurred(event) {
    event.target.classList.add("touched");
  event.target.removeEventListener("blur", blurred);
}

function focused(event) {
  event.target.removeEventListener("focus", focused);
  event.target.addEventListener("blur", blurred);
}

function registerTouch(input) {
    input.addEventListener("focus", focused);
}

for (const input of inputs) {
    registerTouch(input);
}

css prettyprint-override">input.touched:invalid
{
  box-shadow: 0 0 5px 1px red;
}

<form id="registration-form">
  <input type="text" id="name" required>
  <button type="submit">Submit</button>
</form>

Answer 2

我不确定您是否可以直接使用JS编辑伪元素CSS规则，而不使用insertrule/addrule触摸样式表，但我可能会在Blur上切换类名。

演示

/* css */
input:invalid {
   box-shadow: none;
}
input.blurred:invalid {
   box-shadow: 0 0 5px 1px red;
}

// js
const inputs = document.querySelectorAll('input')

for(let input of inputs){
    input.addEventListener('focus', ()=>{
        input.classList.remove('blurred')
    })
    input.addEventListener('blur', ()=>{
        input.classList.add('blurred')
    })
}