Как сделать недоступным элемент

Добавил пользователь Валентин П.
Обновлено: 10.09.2024

Допустим в форме элемента справочника 30 элементов формы. Хочется при открытии сделать всю форму ТолькоПросмотр, а один элемент разрешить редактировать. Код: - не работает. Есть еще вариант перебора всех элементов в цикле, но как то громоздко получается.

ну это и есть "перебор элементов в цикле" а по другому никак? нельзя ли как-нить "отвязать" поведение элемента формы от поведения всей формы?

6 строчек кода на то, чтобы заблокировать всю форму вместо одной: ТолькоПросмотр = Истина и потом отдельный код на каждый разблокированный элемент на самом деле этот вариант я уже и использовал но пришла мысля нельзя ли как попроще

Я писал процедуру куда передается форма и список реквизитов которые нужно оставить доступными. В цикле перебирал рек-ты формы и если рек-т не входит в список делал его недоступным. Аналогично использовал проц-ру для установки доступности. На счет громоздкости - ИМХО, еденственно 100% верный способ это перебор. Так же ты можешь например пердавать список доступных кнопок, если тебе нужны несколько доступных на коммандной панели. Тем более не те операции где особо надо морочится быстродействием - для пользователя это будет мгновенно.

Свойства display и visibility используются, чтобы вывести или скрыть элемент HTML или CSS. Но тогда какая между ними разница? Чтобы понять это, посмотрите на приведенный ниже рисунок, здесь я использовал три элемента div :

Мы используем три элемента div , которые показаны в разделе 1 ( с левой стороны ). Изначально все элементы div выводятся без применения свойств display или visibility .

Посмотреть онлайн демо-версию и код

Во второй части рисунка отображаются только div 1 и div 3 . Для div 2 задано visibility: hidden , но мы все равно видим пространство, которое занимает этот элемент.

Посмотреть онлайн демо-версию и код

В третьем разделе также отображаются только div 1 и div 3 , в то время как div 2 скрыт с помощью свойства HTML display none . Можно увидеть разницу: div 3 смещается вверх и для div 2 больше не отводится пространство.

Посмотреть онлайн демо-версию и код

Синтаксис свойства CSS visibility

Вот, как использовать свойство CSS visibility :

Значение по умолчанию для свойства CSS visibility — visible . Также можно использовать:

Данное значение используется в HTML-таблицах .

Синтаксис свойства CSS display

Это позволяет скрыть элемент, для которого задано значение данного свойства. Именно его я применил для раздела 3 в приведенном выше примере.

Свойство HTML display также используется, чтобы изменить поведение строчных или блочных элементов:

Этот код задает для блочного элемента поведение строчного. Например, div представляет собой блочный элемент. Применив к нему display: inline , мы задаем для него поведение строчного элемента:

Значение block делает противоположное. Например, элемент span является строчным. Если мы применим к нему display: block , он будет вести себя как блочный элемент.

Пример применения свойства display для отображения / скрытия меню

Для разработки этого меню использовался ряд других свойств CSS . Свойство display изначально задано не было. Это означает, что меню будет отображаться.

При клике по ссылке скрыть меню для события клика используется код JQuery , чтобы применить свойство display: none к родительскому элементу div :

Посмотреть онлайн демо-версию и код

Если после этого вы нажмете на ссылку показать меню, код jQuery добавит значение display: initial . Это сделает меню видимым, а ссылки сместятся вниз.

Демо-версия меню с использованием свойства visibility

Я использую тот же пример, что и выше, но на этот раз применю свойство CSS visibility , чтобы показать и скрыть меню. Разница заключается в используемом коде jQuery :

При нажатии на ссылку скрыть меню, меню скрывается. При клике по ссылке показать меню, добавляется свойство visibility: visible , и меню снова отображается:

Посмотреть онлайн демо-версию и код

В этом примере можно увидеть разницу. Когда нажимается ссылка скрыть меню, меню исчезает. При клике по ссылке показать меню, оно вновь становится видимым. Но ссылки при этом остаются на своих местах и не смещаются ( в отличие от HTML display ).

Пример использования свойства CSS visibility для HTML-таблицы

В следующем примере мы создадим HTML-таблицу с помощью фреймворка Bootstrap . Таблица содержит пять строк, которые первоначально отображаются. На данном этапе таблица выглядит следующим образом:

Посмотреть онлайн демо-версию и код

Для строк таблицы использованы разные классы, чтобы задать их стили. Например, danger , active , warning и т.д. Строки таблицы пронумерованы от 1 до 5 ( первый столбец слева ).

Теперь я использую свойство visibility для второй строки, чтобы скрыть ее. Это делается следующим образом:

Таким образом значение collapse также используется для элементов таблицы. Оно применяется для удаления строки, при этом структура таблицы не изменяется. Посмотрите на приведенный ниже рисунок и на код демо-версии:

Посмотреть онлайн демо-версию и код

Вторая строка не видна, но структура таблицы остается неизменной. Если вы используете значение collapse для любых других элементов, оно будет работать, как значение hidden .

Применение свойства CSS display к таблице

Теперь тот же самый пример, за исключением того, что я буду использовать свойство HTML display , чтобы скрыть строку в таблице:

Посмотреть онлайн демо-версию и код

Вторая строка исчезла, а третья строка перемещается вверх, чтобы занять ее место.

Использование display для строчных элементов

Свойство CSS display также используется для изменения поведения строчных и блочных элементов.

Напомню, что блочные элементы занимают все доступное им пространство и начинаются с новой строки. Например, абзацы или блоки div — это блочные элементы.

Строчные элементы занимают только необходимое для отображения пространство и не начинаются с новой строки. В качестве примеров строчных элементов можно привести span , тег ссылки и т.д.

Свойство HTML display позволяет изменять поведение строчных и блочных элементов.

Чтобы изменить поведение блочного элемента на поведение строчного:

Чтобы изменить поведение строчного элемента на поведение блочного:

В следующем примере поведение элемента span изменяется на поведение блочного элемента. А поведение абзаца с помощью свойства CSS display изменяется на поведение строчного элемента.

Чтобы понять, в чем заключается разница, сначала посмотрите на приведенный ниже рисунок и исходный код, в котором свойство HTML display еще не применено:

Посмотреть онлайн демо-версию и код

На странице демо-версии отображен родительский div , а внутри него span и абзац. Изначально их поведение является стандартным для этих элементов:

Родительский div очерчен черной рамкой и занимает всю доступную ширину;
span очерчен синей рамкой, внутри div он занимает только необходимое для отображения пространство и начинается с той же самой строки;
Абзац, который очерчен красной рамкой, также занимает все доступное пространство и начинается с новой строки.

Теперь с помощью HTML display block я изменю поведение span на поведение блочного элемента, а поведение абзаца на поведение строчного. Родительский div остается без изменений. Смотрите результат и демо-версию:

Посмотреть онлайн демо-версию и код

span начинается с новой строки и границы абзаца заканчивается там, где заканчивается его текст. Он не занимает всю доступную ширину, как div или span .

Пожалуйста, оставляйте ваши комментарии по текущей теме материала. Мы очень благодарим вас за ваши комментарии, лайки, отклики, дизлайки, подписки!

Пожалуйста, оставьте ваши отзывы по текущей теме статьи. Мы крайне благодарны вам за ваши комментарии, отклики, лайки, подписки, дизлайки!

Как сделать так чтобы кнопка в форме была заблокирована до тех пор пока не будут заполнены все INPUT-ы и SELECT-ты?
с JS на Вы(,помогите пожалуйста !

Блокнот: Как сделать кнопку недоступной, пока не выделен текст
Создал блокнот! В менюшках есть кнопка Копировать и она копирует только когда выделен текст, хочу.

Как сделать кнопку неактивной, пока не введены данные в textBox?
Всем доброе утро. Дело было так. писал я значит код и столкнулся с проблемой. Как делать кнопку.

Posted via ActualForum NNTP Server 1.5

Так что, я пошёл другим путем.
Ещё надфилёчками подработаю на досуге и код выложу.
А пока

prot0type
я не на столько отупел

Мне одному кажется "ну очень логичной" данная комбинация?

По ссылке не читал, но форм это не касается.
Вернее, конкретно прозрачность для "чайлд-форм"
работало, хоть и с багами.

Posted via ActualForum NNTP Server 1.5

Это если к буквам цепляться.

А на деле - автор типичный пример человека,
плохо знающего предмет и имеющего проблемы
с постановкой задачи. Вряд ли ему есть разница
будут элементы на панели или на форме, если
они будут прозрачными. Это, конечно, если сама
прозрачность не используется не по назначению.

Множество вспомогательных технологий используют навигацию с клавиатуры для помощи в восприятии и взаимодействии с контентом. Один из способов подобной навигации — клавиша Tab. Возможно, вы знакомы с ним, если используете Tab для быстрого перемещения между полями формы, не дотягиваясь до мышки или трекпада.

Tab будет перемещаться по интерактивным элементам в том порядке, в котором они отображаются в DOM. Вот почему так важно, чтобы порядок исходного кода соответствовал визуальной иерархии вашего дизайна.

Список интерактивных элементов, по которым можно пройтись клавишей Tab:

Интерактивный элемент получает состояние фокуса, когда:

На него переходят с помощью клавиши Tab,
Он является ссылкой и на него кликают,
Фокус программно задан с помощью element.focus() в JavaScript.

Фокус похож на ховер, поскольку так мы определяем элемент, с которым хотим провзаимодействовать. Вот почему визуально очевидные стили для фокуса имеют огромное значение.

Управлять фокусом — значит определять, какие элементы могут его получать, а какие нет. Это один из самых сложных аспектов при разработке веб-интерфейсов, но он важен для доступности сайтов и приложений.

В 99% случаев вам стоит оставить порядок фокуса в покое. Не устану это повторять.

Состояние фокуса будет работать без дополнительных усилий, если вы используете для кнопок, для ссылок, для полей форм и т. д.

В редких случаях вам может понадобиться добавить фокус к элементам, к которым обычно событие focus не применимо. Вот некоторые рекомендации относительно того, как реализовать это доступно и интуитивно понятно для пользователя.

tabindex делает элементы фокусируемыми. В качестве значения он принимает число, в зависимости от которого меняется поведение фокуса.

Нет необходимости устанавливать tabindex для интерактивных элементов, которые могут получать фокус с клавиатуры (например, ). Кроме того, вам не нужно прописывать tabindex неинтерактивным элементам, чтобы их могли прочесть вспомогательные устройства (на самом деле, отсутствие роли и доступного имени является ошибкой с точки зрения WCAG). На самом деле, это даже усложняет навигацию для тех, кто использует вспомогательные устройства. У таких пользователей уже есть другие, ожидаемые ими способы чтения контента.

Атрибут tabindex="-1" используется для создания доступных интерактивных виджетов посредством JS. Прописав tabindex="-1" , вы сделаете элемент фокусируемым для JS, а также по клику или тапу, но недоступным через клавишу Tab.

Это антипаттерн. Установив положительное значение tabindex , вы переопределите ожидаемый порядок элементов для фокуса через Tab и запутаете пользователя. Сделать так один раз — уже плохо, несколько — полный кошмар. Серьёзно, не надо так.

Пройтись по интерактивным элементам можно только в том порядке, в котором они следуют друг за другом. Не следует создавать множество tabindex со значением, которое увеличивается для каждого последующего элемента, в соответствии с вашим представлением о том, как пользователь должен читать ваш сайт. Позвольте DOM сделать это за вас.

Иногда есть необходимость запретить состояние фокуса. Хороший пример запрета — это ловушка фокуса, которая временно ограничивает событие фокуса у родительского элемента и у его дочерних элементов.

Ловушку фокуса не стоит путать с ловушкой клавиатуры. Ловушки клавиатуры — это ситуации, когда невозможно закрыть виджет или перейти к другому компоненту из-за вложенного цикла плохо прописанной логики.

Практический пример того, как вы могли бы использовать ловушку фокуса — это модальное окно:

Удержание фокуса в пределах модального окна помогает понять, что является его контентом, а что нет. Это аналогично тому, как зрячий человек может видеть, как окно всплывает поверх контента сайта или приложения. Это важная информация, если:

У вас плохое зрение или слепота и вы полагаетесь на скринридер, чтобы узнать об изменениях после взаимодействия со страницей;
У вас плохое зрение и интерфейс увеличен с помощью экранной лупы, при которой фокусировка за пределами модального окна может сбить с толку и дезориентировать;
Вы перемещаетесь исключительно с помощью клавиатуры и, в случае закрытия модального окна, можете потеряться на странице при попытке вернуться обратно к нему.

Надёжно управлять фокусом — дело сложное. Нужно прибегнуть к JavaScript, чтобы:

Определить родительский блок для всех фокусируемых элементов на странице;
Определить границы содержимого ловушки фокуса (например, модального окна), включая первый и последний фокусируемый элемент;
Убрать как интерактивность, так и видимость всего, что может иметь фокус и находится вне рамок содержимого ловушки фокуса;
Переместить фокус на содержимое ловушки фокуса;
Обрабатывать события, сигнализирующие об уходе с выделенной области (сохранение, отмена, нажатие Esc и так далее);
Выйти из содержимого ловушки фокуса, когда сработает нужное событие;
Вернуть раннее отменённую интерактивность;
Переместить фокус обратно на интерактивный элемент, который вызвал ловушку фокуса.

Не стану врать: все эти действия отнимают много времени. Но всё же, управление фокусом и удобный порядок фокусировки являются частью WCAG (руководства по обеспечению доступности веб-контента). Тема достаточна важна, чтобы считать её частью международного правового стандарта о юзабилити.

Существует небольшой трюк, с помощью которого можно легко ограничить видимость и интерактивность элемента.

У скринридеров есть режим взаимодействия, который позволяет им проходить по странице или просматривать её с помощью виртуального курсора. А ещё виртуальный курсор позволяет пользователю скринридера обнаруживать неинтерактивные части страницы (заголовки, списки и т. д.). В отличие от использования Tab, виртуальный курсор доступен только пользователям скринридера.

При управлении фокусом может потребоваться ограничить возможность обнаружения содержимого виртуальным курсором. В нашем примере с модальным окном это значит предотвратить случайный выход пользователя за рамки окна при чтении контента.

Видимость может быть заблокирована с помощью правильного применения атрибута aria-hidden="true" . А вот с интерактивностью есть один тонкий нюанс.

Атрибут inert — глобальный атрибут в HTML, позволяющий легко убирать и восстанавливать видимость интерактивных элементов, а также их возможность получать состояние фокуса. Вот пример:

Я намеренно избегаю использования для модального окна из-за многочисленных проблем с поддержкой.

Атрибут inert задан элементу , следующему сразу после модального окна сохранения изменений. Теперь всё содержимое не может попасть в фокус и по нему нельзя кликнуть.

Фокус ограничен рамками модального окна. Когда мы закрываем его, то убираем inert из . Этот способ управления ловушкой фокуса проще, чем другие методы.

Помните: событие закрытия модального окна может быть вызвано не только нажатием на кнопки внутри нашего модального окна из примера, но и при нажатии на Esc. А ещё некоторые модальные окна могут быть закрыты по клику на оверлей.

Все последние версии Edge, Chrome и Opera поддерживают inert , если включены экспериментальные функции веб-платформ. Также скоро появится его поддержка в Firefox! Единственное исключение — Safari, как мобильный, так и десктопный.

Мне бы очень хотелось, чтобы Apple реализовала встроенную поддержку inert . Хоть полифил и существует, но у него серьёзные проблемы с поддержкой скринридерами. Нехорошо!

Вдобавок хочется обратить внимание на пометку в README полифила:

Полифил обойдётся вам дорого с точки зрения производительности, в отличие от нативного inert , т. к. он требует изрядного количества перемещений по DOM.

Перемещение по DOM подразумевает, что JavaScript в полифиле требует высокой вычислительной мощности и, следовательно, в конечном итоге замедлит использование.

Для устройств с низким энергопотреблением, таких как бюджетные Android-смартфоны и устаревшие ноутбуки, а также тех, что выполняют сложные задачи (например, запуск нескольких приложений сразу), это может привести к зависанию или сбоям. Нативная браузерная поддержка делает такие процессы менее затратными в этом плане, так как у браузера есть доступ ко всем частям DOM, в отличие от JS.

Лично я разочарован тем, что Apple не поддерживает inert . Хотя понимаю, что добавление новых функций в браузер — невероятно сложная и трудная работа. inert кажется функцией, которую Apple стоило бы начать поддерживать гораздо раньше.

macOS и iOS всегда имели хорошую поддержку доступности, а поддержка вспомогательных технологий — важная часть их маркетинговой кампании. Поддержка inert представляется как естественное продолжение миссии Apple ввиду того, что сама эта функция смогла бы облегчить разработку доступных веб-интерфейсов в разы.

К сожалению, Apple держит в тайне, когда появится поддержка этого атрибута. Поэтому поддержка inert — всё ещё открытый вопрос.

Igalia — компания, работающая над функциями браузеров. Сейчас они проводят эксперимент, в котором каждый может проголосовать за те возможности браузеров, которые ему хотелось бы видеть. Конечно, моя статья совсем не про это, но вы можете узнать больше в Smashing Magazine.

Одно из предложений Igalia — это добавление поддержки inert в WebKit. Если вы искали возможность принять участие в улучшении доступности веба, но не знали с чего начать, я могу вам её предоставить. 5 $, 10 $, 25 $ — совсем необязательно жертвовать большие суммы, даже маленький вклад ценен.

Управление фокусом требует некоторых навыков и осторожности, но это того стоит. Атрибут inert значительно облегчит эту задачу.

Такие техники, как inert , являются примером одной из самых сильных сторон веба: способности кодифицировать неожиданное поведение в нечто простое и эффективное.

Читайте также: