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

当禁用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属性将被忽略。

友情提示:点赞熊源码网http://www.dianzanxiong.com点赞熊源码网 » 网站建设之禁用的表单控件以及如何解决它们
分享到:
赞(0)
广告位820*80