ng触摸等效于香草javascript

Question

当根据需要指定初始表单字段时，我得到的初始表单字段为红色，css为

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

我只想在用普通javascript触摸它们时突出显示它们。

Answer 1

您应该先听输入的焦点事件，然后再听模糊事件。在模糊事件之后，您应该应用类似于"模糊"的类；触摸"；到您必须在CSS中用作选择器的输入。

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

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')
})
}