23

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

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

如何防止创建此跨度？

4

7 回答 7

42

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

.ui-helper-hidden-accessible { display: none; }
于 2012-10-14T14:24:01.410 回答
6

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

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

但不建议这样做。

于 2012-10-09T02:28:13.220 回答
1

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

display: none或者position: absolute; top: -999999不会解决我的问题。我必须完全从 DOM 中删除元素，所以，我编写了以下创建事件处理程序：

create: function (e)
{
    e.target.parentElement.removeChild(e.target.parentElement.querySelector(".ui-helper-hidden-accessible"));
}
于 2014-05-25T09:56:00.460 回答
0

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

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

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

于 2014-06-20T13:22:03.897 回答
0

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

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

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

display:none vs visibility:hidden vs text-indent:9999 每个屏幕阅读器的行为如何？

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

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

于 2014-07-17T13:46:35.080 回答
0

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

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" />
于 2016-11-16T07:30:33.557 回答
-3

这将完美地工作：

$(document).ready(function(){ $("span").remove(); });
于 2014-11-27T07:41:23.723 回答