Jquery ui autocomplete добавляет пробел
Я использую автозаполнение jQuery в div, но я получаю этот дополнительный диапазон, автоматически добавленный jQuery
"<span role="status" aria-live="polite" class="ui-helper-hidden-accessible">search test</span>"
Как я могу предотвратить создание этого диапазона?
Ответы
Ответ 1
По причине доступности, слепые люди могут "читать", сколько результатов найти. Если вы действительно хотите удалить это, вы можете изменить исходный код:
this.liveRegion = $( "<span>", {
role: "status",
"aria-live": "polite"
})
.addClass( "ui-helper-hidden-accessible" )
.insertAfter( this.element );
Но это не рекомендуется.
Ответ 2
У меня та же проблема. вот как я решил... добавить правило css:
.ui-helper-hidden-accessible { display:none; }
Ответ 3
Вы можете избавиться от него, добавив этот обработчик событий в свой автозаполнение:
$(element).autocomplete({
...
create: function (e) {
$(this).prev('.ui-helper-hidden-accessible').remove();
}
});
Нет никакого вреда в его удалении, если вы не заботитесь о том, чтобы слепые люди обращались к нашей странице. Я попробовал трюк display: none
, но это не сработало для меня.
Ответ 4
Я использовал фреймворк CSS для макета с селекторами 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"));
}
Ответ 5
вам действительно не следует удалять это (вы хотите просмотреть веб-страницу, которая предназначена только для слепых, и вы не можете получить доступ к контенту?)...
нелегко сделать сайт ada совместимым.
этот диапазон - всего лишь очень маленький кусочек всего этого.
скрытие элементов с дисплеем не так или иначе является плохой практикой в отношении ada.
почему страницы, подобные facebook, скрывают некоторые элементы, отступая их куда-то за пределами экрана:
display: none vs visibility: hidden vs text-indent: 9999 Как читатель экрана ведет себя с каждым?
для связанных с адой вещей, которые вы могли бы начать здесь:
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(); });