Создание прогрессивно улучшенного представления форм для клиентов с неоднородной поддержкой JS / HTML5

1

Я веб-разработчик и нуждаюсь в помощи, чтобы обеспечить прогрессивное совершенствование.

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

Более того, некоторые пользователи также используют браузеры, которые не поддерживают HTML5, или браузеры, которые не могут запускать JS условно (например, Opera Mini).

В целом, HTML5 имеет больше возможностей, чем JS для этой пользовательской базы.

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

<form action="{% url 'submit_comment' %}" method="POST">
    {% csrf_token %}
    {{ my_form.comment }}
    <button type="submit">OK</button>
</form>

Игнорировать {{ }} номенклатуру. Этот синтаксис Django и просто используется для визуализации - в этом случае - текстового поля, в котором пользователь может написать комментарий.

Вопрос: для клиентов, которые могут поддерживать JS или HTML5, как я постепенно улучшаю опыт подачи формы?

Например, есть раздел этого приложения, в котором пользователи оставляют комментарии для чтения другими. В настоящее время они нажимают кнопку "ответить" и перенаправляются на новую страницу. Код для такой кнопки просто:

<form action="{% url 'response_page' %}" method="POST">
    {% csrf_token %}
    <input type="hidden" name="comment_id" value="{{ comment_id }}">
    <button type="submit">reply</button>
</form>

Теперь мне нужно следующее:

1) Если клиент поддерживает JS/HTML5, DOM изменяется, и текстовое поле, привязанное к form появляется прямо под кнопкой. Не происходит обновления.

2) Если клиент не поддерживает JS/HTML5, пользователь перенаправляется на новую страницу, как раньше.

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

Я надеюсь, что будут установлены шаблоны для обработки такого рода вещей. Будучи веб-разработчиком, я не привязан к этим. Было бы здорово получить иллюстративный ответ.

Примечание. Я бы предпочел сделать это в HTML5, но также открыт для JS-решений, и я предпочитаю простой ванильный JS вместо того, чтобы что-нибудь прихоть.

  • 0
    Извините, если это слишком просто, но вы не можете просто использовать event.preventDefault () в прослушивателе событий, чтобы переопределить действие формы, если выполняется javascript.
  • 0
    @iSZ: ответ, вероятно, будет простым. Не могли бы вы написать краткий пример того, что вы подразумеваете под ответом?
Показать ещё 1 комментарий
Теги:
opera-mini
progressive-enhancement

1 ответ

2
Лучший ответ

Это очень простой ответ, который препятствует отправке формы, если javascript доступен, и добавляет требуемый ввод, как было предложено выше.

window.onload = function(){
  var input = document.createElement("input");
  input.type ='text';
  input.name = "comment";
  input.style.display = 'block';
  document.getElementById('myForm').appendChild(input);
  document.getElementById("submit").addEventListener("click", function(event){
    event.preventDefault();
  });
}
<form action="http://example.com" method="POST" aria-live="polite" id="myForm">
  <input type="hidden" name="comment_id" value="">
  <button id="submit" type="submit">reply</button>
</form>
Поделиться
  • 0
    Когда display:none установлен, это означает, что элемент никогда не попадает в дерево визуализации? Просто глядя на это с точки зрения производительности.
  • 0
    Вы правы, display: none никогда display: none находится в дереве рендеринга. Это также не доступно людям, использующим программы чтения с экрана, что, кажется, является желаемым результатом. Однако на этой ноте, вероятно, было бы целесообразно объявить об изменении DOM, подключив aria-live для пользователей вспомогательных технологий. Если вы пойдете по этому пути, я бы также рекомендовал сохранить скрытый узел DOM в JS и добавлять его только после завершения отправки на основе AJAX. Вы бы хотели установить aria-live на родительский контейнер внедренного div .
Показать ещё 6 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню