Скрыть элемент, только если включен JavaScript - PullRequest
Новая
       4

Скрыть элемент, только если включен JavaScript

2 голосов
/ 23 сентября 2011

У меня есть представление, которое отображает текстовое поле следующим образом: 

@Html.TextBoxFor(m => m.CodeGuest, new {style = "display: none"})

отображается через javascript (поэтому пользователь нажимает флажок).

Если javascript не включен, я должен удалить эту строку (style = "display: none"), чтобы текстовое поле отображалось по умолчанию.

Ответы [ 6 ]

5 голосов
/ 23 сентября 2011

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

<noscript>
  <div>
    Hello YOU HAVE JAVASCRIPT TURNED OFF YOU BIG SILLY
  </div>
</noscript>

Содержимое тега <noscript> отображается только при отключенном JavaScript.

4 голосов
/ 23 сентября 2011

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

Если вы используете jQuery, это будет примерно так: 

$(function() {
    $('[name="CodeGuest"]').hide();
});

И уберите дисплей: ни один из логики Razor.

Другое решение - заключить элемент textbox в <noscript> -tags.

Например: 

<noscript>
     @Html.TextBoxFor(m => m.CodeGuest)
</noscript>
3 голосов
/ 23 сентября 2011

Как я обычно это делаю, изначально скрывая элементы С javascript при загрузке Dom ... Таким образом, без javascript = без скрытия ...

1 голос
/ 23 сентября 2011

Я обычно предпочитаю делать это, чтобы избежать переполнения контента на длинных страницах при использовании решения для скрытия JS, это добавить что-то вроде этого в CSS:в JS просто добавьте это: 

document.getElementsByTagName('html')[0].className += ' jsEnabled';

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

1 голос
/ 23 сентября 2011

Вы можете просто скрыть элемент с помощью JavaScript, чтобы элемент отображался по умолчанию. Только если JavaScript выполнен, элемент скрыт.

Я не знаю, какую разметку генерирует данный код, но с помощью JavaScript вы могли бы сделать что-то вроде этого (для простого примера, когда элемент получает идентификатор): 

elem = document.getElementById(id);
elem.style.display = 'none';

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

Для DOM-манипуляции я обычно использую jQuery, он имеет хороший DOM-ready Listener и простой выбор элементов.

1 голос
/ 23 сентября 2011

Мне нравится ответ Пойнти, но вот простой вариант сценария: 

<script type="text/javascript">
  document.write('<style type="text/css">#hideMe {display:none;}<\/style>');
</script>

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

Вышеуказанное предложение имеет тот же недостаток.

...