jQuery UI自动完成添加一个span

Question

我正在一个div上使用jQuery自动完成功能，但是我发现jQuery会自动添加这个额外的span元素。

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

我该如何防止创建这个元素？

- user391986

Answer 1

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

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

- user706420

---

这对我有用。我有一个关于为什么会发生这种情况的问题（为什么这个 span 显示并变得可见，包含自动完成返回的值）？这突然发生了。以前没有发生过。 - Hung Luu

可能是因为您将jQuery UI升级到了新版本。 - Agile Hobo

我刚刚升级到了最新的JQ版本，包括UI，在我升级之后就开始出现这个问题了。奇怪的是，我之前使用的旧版本没有出现这个问题。 - TH1981

对于那些使用Bootstrap 3并希望保持预期功能的人，可以将 .ui-helper-hidden-accessible{@extend .sr-only;} 添加到您的 framework_and_overrides.css.scss 文件中。现在Foundation中可能也有类似的东西... - genkilabs

Answer 2

这是出于无障碍原因，盲人可以“阅读”找到多少结果。如果您真的想删除它，您可以修改源代码：

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

但是这并不推荐使用。

- jiguang

---

对于盲人来说，“阅读”实际上意味着通过某些工具进行“听取”。 :) - jiguang

除了将文本转换为合成语音的屏幕阅读器软件应用程序外，还有盲文显示器，可以一次顺序显示40（或80）个字符的页面。http://en.wikipedia.org/wiki/Refreshable_Braille_display - Ubuntourist

Answer 3

我在使用CSS弹性盒子进行布局，并使用nth-child选择器，但是这个span元素扭曲了我的列布局。 display: none 或 position: absolute; top: -999999 无法解决我的问题。我必须完全从DOM中删除该元素，因此我编写了以下创建事件处理程序：

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

- Ashraf Sabry

Answer 4

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

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

除非您关心视觉障碍者访问我们的页面，否则删除它不会有任何损害。我尝试了 display: none 技巧，但对我没用。

- Ziad

---

人们关心盲人或其他残障人士并不奇怪。因此，即使您不在意，如果您这样做会造成伤害。 - Riccardo Cossu

这是一个上下文问题，在许多情况下，不关心提供从未被请求的支持是有意义的，比如在需要视觉敏捷度的应用程序中。 - Ziad

Answer 5

你真的不应该删除这个元素（你想浏览一个只针对盲人的网页，却无法访问内容吗？）...

要使网站符合ADA标准并不容易。这个span只是其中一小部分。

使用display none或类似方法隐藏元素是违反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可能会有用...

- Guntram

Answer 6

对我来说，添加.css文件起作用了（当然，删除所有span元素也可以解决问题，但这不是一个好的解决方案）：

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

- ognjenkl

Answer 7

这将完美地工作：

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

- Sindhuja Peacedove

---

你可以使用这个答案来从HTML DOM中删除所有的<span>元素。 - ahmed hamdy