主页 / 问题 / 797582
Accepted
Igor
Asked:2020-03-13 20:06:44 +0000 UTC2020-03-13 20:06:44 +0000 UTC

:invalid 在页面加载时不会触发，但只有在输入更改后才会触发

  • 772

在这个例子中，如果“执行代码”input是红色的，它工作:invalid，它必须是input默认样式，只要它没有被触及。

我需要实现这种行为：

input使用默认样式，您输入一个无效值，您将其删除，focus然后input它才会变成红色。

是否可以在不使用的情况下实现此行为js

但是目前input页面加载时它会变成红色。如何解决？无法required删除。

input:invalid {
    background: red;
}
input:focus {
    background: white;
}
<input type="email" required/>

css

3 个回答

  1. Best Answer

    document.querySelector('input').addEventListener('input', function() {

  if (document.querySelector('input').value !== '') {
    document.querySelector('input').classList.add('active');
    console.log(document.querySelector('input'))
  } else {
    document.querySelector('input').classList.remove('active');
    console.log(document.querySelector('input'));
  }
})
    input.active:invalid {
  background: red;
}

input.active:focus {
  background: transparent;
}
    <input type="email" required/>

    • 2

  2. 您可以使用占位符和伪类:placeholder-shown。缺点：浏览器支持、强制性占位符（即使来自空格）

    input:not(:placeholder-shown):invalid {
    background: red;
}
input:focus {
    background: white;
}
    <input type="email" placeholder=" " required/>
<input type="tel" placeholder="Например числа"  pattern="[^A-Za-zА-Яа-яЁё]+$" required />

    • 1 

  3. input:not(:focus):not(:placeholder-shown):invalid {
  background: red;
}
    <input placeholder=" " type="email" required/>

    • 0

相关问题