网站建设之禁用的表单控件以及如何解决它们

当禁用HTML表单控件元素时，这意味着无法选择，单击，键入内容，也不再接受焦点。同样，默认情况下，浏览器将此类表单控件显示为灰色。

在本文中，您将了解如何使用HTML disabled布尔值属性，如何使用JavaScript和禁用样式的表单控件对其进行切换。

网站建设

摘要

• HTML disabled布尔值属性
  • 禁用的字段集
  • disabled ！= readonly
  • 该aria-disabled属性
• disabled用JS 切换状态
  • 射击事件
• 设置disabled表单控件的样式
  • “禁用”链接
  • 默认用户代理disabled样式

HTML disabled布尔值属性

根据WHATWG的说法，HTML disabled属性受一组有限的HTML元素和新引入的与表单相关的自定义元素的支持：

• button
• fieldset
• optgroup
• option
• select
• textarea
• input

在本文中，我们将只关注基本的HTML元素，因此这是一个具有disabled属性的复选框输入：

<input type="checkbox" id="check" name="check" disabled>
<label for="check">Checkbox</label>

请注意disabled，由于属性具有布尔逻辑，因此实际上并不需要为其设置值。因此，考虑到元素上存在布尔属性，以下所有值都是多余的，disabled无论如何结果都是一种行为：

• disabled="disabled"
• disabled="true"
• disabled="false"
• disabled="whatever"

禁用的字段集

HTML fieldset元素用于对Web表单中的多个控件进行分组。如果在disabled上设置了boolean 属性fieldset，则其中包含的所有表单控件也将被禁用。

这是一个示例，其中两个表单控件由于被禁用fieldset元素包装而被禁用。

<form>
  <fieldset disabled>
    <legend>Disabled fieldset</legend>
    <div>
      <label for="name">Name</label>
      <input type="text" id="name" value="Chris">
    </div>
    <div>
      <label for="pwd">Password</label>
      <input type="password" id="pwd" value="topsecret">
    </div>
  </fieldset>
</form>

disabled ！= readonly

与readonly表单控件相比，那些控件disabled不在表单内提交，因此在进行form验证时也将忽略它们。此外，disabled窗体控件也不是可聚焦的。

该aria-disabled属性

如果您可以使用具有内置要求的语义和行为的本机HTML元素或属性，而不是重新使用元素并添加ARIA角色，状态或属性以使其可访问，则可以这样做。

从W3C

当使用HTML元素（例如表单控件）时，它本身支持disabledboolean属性，则不需要该aria-disabled属性。

史蒂夫·福克纳（Steve Faulkner）在残障/失禁用症属性上写了一篇不错的文章，因此您应该检查一下！

disabled用JS 切换状态

您可以利用以下事实：该.disabled属性返回布尔值，因此可以使用以下命令轻松地对其进行切换：

let el = document.querySelector(".myFormControl");
el.disabled = !el.disabled;

此外，除了经典removeAttribute()和setAttribute()方法外，您还可以使用toggleAttribute()方法来切换disabled属性或任何其他布尔属性。尽管浏览器支持并不完美，但这可能会派上用场：

let el = document.querySelector(".myFormControl");
el.toggleAttribute("disabled");

射击事件

谈到禁用元素和JavaScript，Jake Archibald写了一篇有趣的文章，介绍了在禁用表单控件上触发事件，他在其中争论了pointer-events: none在所有:disabled元素上使用的必要性。

通过更好的浏览器对:is()（以前为，:any()或:matches()，@ SelenIT2指出的）CSS伪类的支持，以下是我们编写防弹CSS规则的方法，以防止在禁用的表单控件上发生交互和事件问题：

:disabled:is(
button,
optgroup,
option,
select,
textarea,
input
) {
  pointer-events: none;
}

fieldset上述规则中排除了该元素，以避免破坏title包装在其中的其他元素或属性。

设置disabled表单控件的样式

有两种使用CSS选择禁用元素的方法：

• 旧的[disabled]属性选择器可用于具有disabled属性的任何HTML元素用户，并且实际上不必是表单控件元素。
• 选择器级别3中:disabled引入的伪类是选择禁用元素的首选方法，因为它与仅支持该属性的HTML元素匹配。disabled

“禁用”链接

链接不是button，都不div是，span或其他任何形式。a元素仍然可以在不带href属性的情况下用作占位符链接。

如果该a元素没有href属性，则该元素表示一个占位符，用于否则可能会放置链接的位置。

从WHATWG

我们知道:disabledCSS伪类仅适用于本机支持disabled属性的表单控件，而a元素不在其中。

因此，以下CSS规则包含[disabled]属性选择器和.disabled类选择器。您知道，以防万一您需要，需要或必须使用它，<a disabled>...</a>而不是<a class="disabled">...</a>在特定情况下使用。

.disabled,
[disabled] {
  pointer-events: none;
  cursor: not-allowed;
  opacity: .7;
}

如果您想知道为什么还要禁用链接元素，那么我想到了一个场景，并且我确定您之前也确实迷失了这一点：

假设您在导航中有一个活动项目，显示它是该导航中的活动URL。现在，除了应用的活动样式之外，您可能还希望阻止用户单击并刷新他所在的已经活动的页面。

默认用户代理disabled样式

如果您想知道所有这些默认的禁用样式的来源，以下是最受欢迎的用户代理样式的列表，请随时关注：

• 铬
• Mozilla
• WebKit

结论

• IE 11及以下版本不完全支持上的boolean disabled属性fieldset。
• 在将CSS pointer-events: none声明添加到链接时，为了尝试禁用它，您还应该考虑应用tabindex="-1"以便将其从制表符顺序中删除。
• 没有充分的理由使用CSS [disabled]属性选择器来支持:disabled伪类。也许需要IE6-IE8支持，这绝对不是一个好理由。
• 与boolean disabled属性相比，将aria-disabled设置为属性时，确实需要true或的值false。
• 如果aria-disabled="false"与disabled属性一起在表单控件上设置，则后者具有更高的特异性， 并且该aria-disabled属性将被忽略。