Есть ли альтернатива условному отображению: нет

Question

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

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

Нет лучшего способа?

Answer 1

Использование отображения: ни один из них в сочетании с JavaScript и CSS не является самым простым способом простого отображения или скрытия элементов DOM на лету. Тем не менее, вы можете манипулировать самой DOM, добавляя или удаляя элементы, а не просто показывая / скрывая их (например, с помощью jQuery ).

Answer 2

есть частичная альтернатива для отображения: нет, т.е. использовать этот стиль в CSS

opacity:0;

но проблема в том, что он не появляется на холсте, но он все еще там. используя дисплей: нет; полностью удаляет элемент и создает при применении атрибута display: block;

Answer 3

Идея изменить форму в каждом поле POST или изменить порядок полей перед отправкой. Если первое, то показанные поля должны быть удалены на стороне сервера, прежде чем страница попадет к пользователю. Если вы говорите об изменении на стороне клиента перед публикацией (например, удаление полей, которые не релевантны на основе ввода в некоторых полях в качестве пользовательских типов), вы можете использовать JavaScript для удаления полей из DOM.

Две вещи, которые нужны вашему решению:

1. Формы должны быть функциональными без JavaScript (даже если они кажутся менее удобными)
2. Не отправляйте поля, которые пользователь не может видеть, если они не являются тегами ввода с type = "hidden". Вы будете путать себя с бэкэндом, только если не знаете, оставил ли пользователь поле пустым или не смог его увидеть, потому что его динамическое изменение стиля было изменено клиентским скриптом.

Answer 4

Если вы не показываете и не скрываете элементы динамически, когда пользователь взаимодействует с формой, тогда нет необходимости использовать CSS / Javascript. Просто используйте свой серверный язык (PHP / JSP / что угодно), чтобы не выводить скрытые поля. Вы будете использовать меньшую пропускную способность, и форма будет работать даже при отключенном JavaScript.

Answer 5

Может быть, вам следует просто перепроектировать форму, которая использует все поля отображения : none , или переписать / реорганизовать скрипт, который выполняет эту проверку? Если форма слишком велика, разбейте ее на несколько частей - это тоже поможет пользователю. Мне лично не нравится, если форма часто меняется всякий раз, когда я пытаюсь заполнить все.