jquery ui自动完成添加跨度答案

【问题标题】：jquery ui autocomplete adding a spanjquery ui自动完成添加跨度
【发布时间】：2012-10-09 02:17:29
【问题描述】：

我在 div 上使用 jQuery 自动完成功能，但我得到了由 jquery 自动添加的额外跨度

"<span role="status" aria-live="polite" class="ui-helper-hidden-accessible">search test</span>"

如何防止创建此跨度？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

我通过添加 CSS 规则解决了这个问题：

.ui-helper-hidden-accessible { display: none; }

【讨论】：

这对我有用。我有一个关于为什么会发生这种情况的问题（为什么这个跨度出现并且包含自动完成返回值变得可见）？它只是突然发生在我身上。以前没有发生过。
可能是因为您将 jQuery UI 升级到了新版本。
我刚刚升级到包括 UI 在内的最新 JQ 版本，它是在我升级后开始的。奇怪的是，我使用的旧版本没有这样做。
对于那些希望保留预期功能的 Bootstrap 3 用户，请将 .ui-helper-hidden-accessible{@extend .sr-only;} 添加到您的 framework_and_overrides.css.scss 文件中。现在 Foundation 中可能也有类似的东西......

【解决方案2】：

出于可访问性的原因，盲人可以“阅读”找到多少结果。如果实在想删，可以修改源码：

this.liveRegion = $( "<span>", {
                role: "status",
                "aria-live": "polite"
            })
            .addClass( "ui-helper-hidden-accessible" )
            .insertAfter( this.element );

但不推荐。

【讨论】：

对于盲人来说，'阅读'实际上意味着'听'，通过一些工具:)
除了将文本转换为合成语音的屏幕阅读器软件应用程序外，还有盲文显示器一次显示 40（或 80）个字符，按顺序依次显示。 en.wikipedia.org/wiki/Refreshable_Braille_display

【解决方案3】：

我使用 CSS flex box 进行带有 nth-child 选择器的布局，因此，这个跨度扭曲了我的列布局。

display: none 或 position: absolute; top: -999999 无法解决我的问题。我不得不从 DOM 中完全删除该元素，因此，我编写了以下 create event 处理程序：

create: function (e)
{
    e.target.parentElement.removeChild(e.target.parentElement.querySelector(".ui-helper-hidden-accessible"));
}

【讨论】：

【解决方案4】：

您可以通过将此事件处理程序添加到您的自动完成来摆脱它：

$(element).autocomplete({
    ...
    create: function (e) {
        $(this).prev('.ui-helper-hidden-accessible').remove();
    }
});

除非您关心盲人访问我们的页面，否则删除它并没有什么坏处。我尝试了display: none 技巧，但这对我不起作用。

【讨论】：

人们照顾盲人或其他残疾人并不奇怪。因此，即使您不在乎，也会造成伤害
这是一个上下文问题，在许多情况下，不关心提供一开始就不会请求的支持是有意义的，例如在需要视觉灵活性的应用程序中。

【解决方案5】：

你真的不应该删除这个（你想浏览一个仅供盲人使用的网页并且你无法访问内容吗？）...

要使网站符合 ada 标准并不容易。这个跨度只是所有这些东西的一小部分。

隐藏不显示或不显示的元素对于 ada 来说是一种不好的做法。这就是为什么像 facebook 这样的页面通过缩进到屏幕外的某个地方来隐藏一些元素：

display:none vs visibility:hidden vs text-indent:9999 How screen reader behave with each one?

对于与 ada 相关的内容，您可以从这里开始： http://www.techrepublic.com/blog/web-designer/creating-an-ada-compliant-website/

也许在这种情况下将高度强制为 0 可能有用...

【讨论】：

【解决方案6】：

添加 .css 文件对我有用（当然删除所有 span 元素也有效，但这不是一个好的解决方案）：

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" />

【讨论】：

【解决方案7】：

这将完美地工作：

$(document).ready(function(){ $("span").remove(); });

【讨论】：

您将使用此答案将所有跨度元素删除到HTML DOM