时间戳

首页 > 解决方案 > 如果标签为空，则在取消选择时为所需的输入标签设置样式

html - 如果标签为空，则在取消选择时为所需的输入标签设置样式

问题描述

我有一个可能看起来像的输入标签

<input required pattern="..." >

如果该标签为空或该字段与模式不匹配，我想以不同的方式设置此标签的样式（边框周围为红色），但前提是该字段已被访问过。

  1. 如果我打开包含表单的页面，我希望所有字段的样式都正常。

  2. 如果我单击必填字段，然后

    • 按标签
    • 单击另一个字段
    • 或提交表格

    而该领域是

    • 还是空的
    • 或填写无效输入，或单击另一个字段

然后想要这个字段的样式不同

我知道:required和:invalid伪类标签，但我不知道如何将其限制为仅已访问过的字段，因为该:visited标签仅适用于链接

标签： htmlcssforms

解决方案

您可以为每个输入添加一个焦点事件侦听器，该侦听器添加一个您可以在 :invalid 时设置样式的类。这样，除非存在“一直处于焦点”类，否则永远不会应用无效样式。

const inputEmail = document.getElementById('email');
const inputNumber = document.getElementById('number');

inputEmail.addEventListener('focus', () => {
  inputEmail.classList.add('has-been-focused');
});

inputNumber.addEventListener('focus', () => {
  inputNumber.classList.add('has-been-focused');
});
input {
  outline: none;
}

.has-been-focused:invalid {
  border: 5px solid red;
}
<input id="email" placeholder="Email" type="email" required />
<input id="number" placeholder="Number" type="number" required />

推荐阅读