Блокирование элементов форм
У любого элемента формы есть два состояния, которые ограничивают доступ к элементу или ввод данных, — блокирование (disabled) и только для чтения (readonly).
Блокирование
Блокирование элемента не позволяет вообще производить с ним каких-либо действий, в том числе выделять содержимое текстового поля, изменять его или активизировать. К тому же такие поля не отправляются на сервер.
Некоторые браузеры позволяют выделять и копировать содержимое заблокированного текстового поля, но все остальные действия недоступны.
На рис. 1 представлены разные элементы форм в заблокированном состоянии.
Рис. 1. Вид заблокированных элементов в Chrome
Для блокирования элемента формы используется атрибут disabled . Добавление этого атрибута разрешает отображать элемент формы, но не позволяет изменять его.
Блокирование элементов форм обычно используется для того, чтобы динамически с помощью скриптов изменять значение поля. Пользователь не должен в подобном случае иметь доступ к полю, поэтому оно блокируется. В примере 1 показано применение скриптов для изменения блокировки кнопки.
Пример 1. Блокирования поля
HTML5 IE Cr Op Sa Fx
Блокировка поля
Я согласен со всеми условиями
Результат данного примера в Safari показан ниже (рис. 2).
Рис. 2. Заблокированное текстовое поле
В данном примере применяется блокирование кнопки, но оно снимается, как только пользователь поставит флажок возле текста «Я согласен со всеми условиями».
Поле только для чтения
Поля формы можно не только блокировать, но и переводить их в режим только для чтения. В этом случае доступ к ним сохраняется, но изменять значения заданные по умолчанию нельзя. Разумеется, речь идёт только о полях, где требуется вводить текст. Выделять и копировать текст можно, но изменить не получится.
Для установки режима «только для чтения» используется атрибут readonly , он добавляется к тегу или . На вид элемента формы это никак не влияет, но как было уже замечено, модифицировать значение поля не удастся.
Ниже представлены два поля с многострочным текстом, одно из которых находится в обычном режиме, а второе — «только для чтения».
В примере 2 показано создание поля для чтения.
Пример 2. Использование readonly
HTML5 IE Cr Op Sa Fx
Поле для чтения Защита кода на странице
Возможно ли защитить исходный код страницы использую только JS?
Например блокировать пункт «Исследовать элемент» и «Исходный код» в меню при нажатии ПКМ, блокировать такие клавиши как F12 , CTRL + S и другие, позволяющие просмотреть исходный код.
Отслеживать
22.4k 10 10 золотых знаков 56 56 серебряных знаков 119 119 бронзовых знаков
задан 27 сен 2016 в 16:45
23.6k 4 4 золотых знака 35 35 серебряных знаков 68 68 бронзовых знаков
Нет, невозможно.
27 сен 2016 в 16:51
Никак. Смиритесь с этим.
– user207618
27 сен 2016 в 16:51
Единственное, что может чуть помочь — обфускация кода. Но это просто усложнит отладку, Ваши совершенные алгоритмы всё равно будут доступны.
– user207618
27 сен 2016 в 16:53
нет, спрятать то что закачивается к клиенту в открытом виде невозможно) Единственное что может помочь php))
27 сен 2016 в 16:56
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Все указанные вами действия «защитить» нельзя(возможно даже никакие). Но, даже если бы это и удалось — можно использовать анализаторы трафика(снифферы), при помощи которых можно легко глянуть любой код. Например, Charles или wireshark.
PS. нужно понимать, что любой html,css,js, который попадает клиенту — нельзя защитить от просмотра, т.к. он должен быть передан по сети и выполнен у клиента, а значит может быть просмотрен не только движком JS, но и человеком:D
PPS. но для защиты кода(js) — можно использовать обфускаторы(заодно они и минификаторы): JSmin, Closure compiler, YUI Compressor. защитить же css и html — никак нельзя (хотя можно, конечно, его минифицировать, но это в две секунды любой IDE-шкой правится на читабильный вид.)
:disabled , :enabled
Эта кнопка серая. Она не доступна для клика. Как написать селектор на основе состояния элемента?
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
Контрибьюторы:
Обновлено 1 августа 2022
Кратко
Скопировать ссылку «Кратко» Скопировано
Псевдоклассы :disabled и :enabled помогают стилизовать интерактивные элементы — на которые можно и нельзя нажать.
Легко применяются к любым элементам, которым можно задать атрибут disabled : , , , , , , , и .
Пример
Скопировать ссылку «Пример» Скопировано
Часто требуется, чтобы на кнопку отправки формы нельзя было нажать, пока не заполнены все поля этой формы. Проще всего заблокировать кнопку атрибутом disabled . Но недостаточно просто указать его в HTML, нужно ещё и при помощи оформления показать пользователю, что кнопка не активна. Как раз для этого нам пригодится псевдокласс :disabled .
Кнопка будет полупрозрачной:
button:disabled opacity: 0.5;>button:disabled opacity: 0.5; >
Псевдокласс :enabled , наоборот, поможет стилизовать все доступные для взаимодействия элементы. По факту его чаще всего не указывают, потому что записи с ним и без него, как правило, равноценны: .input = .input : enabled .
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Любому селектору, указывающему на интерактивный элемент, дописываем двоеточие и указываем одно из ключевых слов: enabled или disabled .
Как понять
Скопировать ссылку «Как понять» Скопировано
Браузер ориентируется на атрибут disabled и, в зависимости от его наличия или отсутствия, добавляет элементу состояние enabled — доступен, или disabled — недоступен.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� Даже если дизайнер забыл про неактивное состояние, обязательно прописывайте его в стилях, чуть приглушая фоновый цвет или делая элемент полупрозрачным — чтобы пользователь точно знал, что с этим элементом взаимодействовать нельзя.
�� enabled чаще всего не используется, потому что все интерактивные элементы по умолчанию доступны (включены). Это значит, что прописав стили для селектора .input , вы закрываете сценарий с активным элементом.
На практике
Скопировать ссылку «На практике» Скопировано
Алёна Батицкая советует
Скопировать ссылку «Алёна Батицкая советует» Скопировано
�� «Выключать» взаимодействие с кнопками или другими элементами формы удобнее именно атрибутом disabled , потому что он сразу же отключает возможность нажать на этот элемент без дополнительных стилей. И, ориентируясь на него, гораздо удобнее прописывать стили для неактивных элементов, используя псевдокласс disabled .
Код для кнопки из моего последнего проекта:
Стили для активной кнопки в обычном состоянии:
.additional-btn padding: 2rem 3rem; border: 1px solid currentColor; font-family: inherit; font-size: 1.6rem; color: #FF6650; text-decoration: none; background-color: transparent; transition: border 0.3s, color 0.3s; cursor: pointer; user-select: none;>.additional-btn padding: 2rem 3rem; border: 1px solid currentColor; font-family: inherit; font-size: 1.6rem; color: #FF6650; text-decoration: none; background-color: transparent; transition: border 0.3s, color 0.3s; cursor: pointer; user-select: none; >
Стили для кнопки при наведении курсора или клике:
.additional-btn:active,.additional-btn:hover color: #FF5050; transition: none;>.additional-btn:active, .additional-btn:hover color: #FF5050; transition: none; >
Стили для кнопки, когда она неактивна:
.additional-btn:disabled cursor: default; color: #A44234;>.additional-btn:disabled cursor: default; color: #A44234; >
Отключаем нежелательные HTML-элементы с помощью CSS
Часто, когда мы сдаем проект клиенту, мы теряем контроль над HTML-кодом. Иногда клиент использует CMS (Системы Управления Контентом), которые дают ему полный контроль над теми или иными частями HTML-кода. Иногда клиент просто использует наши темплейты для вывода своего кода в документ.
В большинстве случаев довольно тяжело проинформировать клиента о том, как использовать темплейты или CMS, которые вы ему предоставляете, а иногда просто неприемлемо толкать пламенные речи о семантической верстке и веб-стандартах. Клиент может/будет использовать «старую, добрую разметку», ту, которую он знает, просто потому что она работает и выглядит так как он привык. Скорее всего в ней будут присутствовать нежелательные (deprecated) тэги и атрибуты, такие как bgcolor, align и «вечный» font. Эта статья о том, как блокировать нежелательные HTML-тэги с помощью CSS, тем самым аккуратно направляя клиента в правильном направлении.
Есть несколько решений проблемы. Одно из них — вывод предупреждающего изображения с помощью CSS, когда изпользуются нежелательные тэги. Подробные обьяснения этого способа есть здесь и здесь. Второе решение — «вырезание» нежелательных тегов и атрибутов на стороне сервера. Этот способ является наиболее эффективным, другое дело что не всегда есть контроль за сервером где расположен сайт.
Идея состоит в том, чтобы сохранить естественный каскад и наследие стилей во всех браузерах, элегантно «отключая» HTML, нежелательный к использованию клиентом. И тогда клиент перестанет использовать его, потому что нежелательные тэги просто перестанут «работать». Элегантный и ненапрягающий клиента способ, который направит его по верному пути.
Нежелательные HTML-тэги и атрибуты:
bgcolor border align vspace hspace valign width height
Решение
В идеале мы могли бы просто откорректировать некоторые HTML-тэги, вставив значение inherit для эквивалентного CSS-свойства. Браузеры, работающие по стандартам, просто проигнорируют заданные в коде нежелательные атрибуты и будут использовать вместо них наследуемые значения в каскаде.
На пример этот CSS:
font
будет превалировать над этим кодом:
Синий
Соответственно цвет текста внутри тэга font будет цветом, наследуемым по каскаду, а не синим, как задано в коде. То что надо. Но как вы наверняка знаете — у Internet Explorer есть проблемы с наследуемыми значениями. И в седьмой версии тоже. Так что за работу:
Expressions и currentStyle в помощь:
font < color:inherit; /* Нормальные браузеры */ color:expression(this.parentNode.currentStyle['color']); /* IE */ >
Работает? Отлично, поехали дальше:
font < font-family:inherit; /* Нормальные браузеры */ font-family:expression(this.parentNode.currentStyle['fontFamily']); /* IE */ >
Все чудесно, кроме того что Opera 9 не наследует значение для font-family. К счастью font нас тоже устроит:
font < font:inherit; /* Нормальные браузеры */ font-family:expression(this.parentNode.currentStyle['fontFamily']); /* IE */ >
С этим разобрались. Перейдем к свойству font-size. Здесь нужна деликатность, так как значение размера шрифта наследуется по отношению к вычисляемому (computed) значению. Предыдушие expression‘ы здесь не сработают, так как если для body выставлено значение свойства font-size, равное 2em, то вычисление значения размера шрифта начнется от этой точки. Браузер проверит значение font-size для родительского элемента тэга font, которое равняется 2em и представит вычисляемое значение, равное 4em (2em от 2em). А это не то что нам нужно. Решение простое. Нужно использовать начальное значение font-size, равное 100% для всех браузеров. Давайте добавим несколько свойств нежелательному тэгу basefont, чтобы и его утихомирить. Вот полный список правил для «укрощения» тэгов font и basefont:
font,basefont < color:inherit; /* Нормальные браузеры */ color:expression(this.parentNode.currentStyle['color']); /* IE */ font:inherit; /* Нормальные браузеры. Font вместо font-size для Оперы */ font-family:expression(this.parentNode.currentStyle['fontFamily']); /* IE */ font-size:100%; /* Все браузеры. Размеры наследуются */ >
Двигаемся дальше. Давайте воспользуемся базовой техникой, чтобы отменить тэги center, s, strike и u:
center < text-align:inherit; /* Нормальные браузеры */ text-align:expression(this.parentNode.currentStyle['textAlign']); /* IE */ >s,strike,u < text-decoration:inherit; /* Нормальные браузеры */ text-decoration:expression(this.parentNode.currentStyle['textDecoration']); /* IE */ >
Свершилось! Мы «отключили» большинство нежелательных тэгов, используя только CSS и expression’ы.
А как же атрибуты? HTML4 включает в себя некоторое количество нежелательных атрибутов, которые могут изрядно попортить нервы. Давайте их тоже «повыключаем». Начнем с align:
*[align] < text-align:inherit; >/* Нормальные браузеры */
Все бы хорошо, но IE6 не поддерживает селекторы атрибутов. Посему, нам надо модифицировать expression, для того чтобы он проверял наличие атрибута align у тэга. Вот что получилось:
*[align] < text-align:inherit; >/* Нормальные браузеры */ * < text-align:expression(this.align ? this.parentNode.currentStyle['textAlign'] : ''); >/* IE */
Далее на очереди атрибуты тэга img. Помимо атрибута align, мы хотим отключить атрибуты border, vspace и hspace. Так как значения margin и border не наследуются, то здесь применимо простое правило:
img < margin:0; border:none; >/* Все браузеры */
Вот здесь мы как раз сталкиваемся с неразрешимой проблемой для IE6. vspace и hspace не равнозначны свойству margin в нем, поэтому IE6 будет продолжать отображать их. Единственное решение, которое пришло мне в голову это написать маленький скриптик, который будет просто удалять эти атрибуты при загрузке документа:
window.onload = function() < for (i=0;i document.getElementsByTagName('img')[i].removeAttribute('vspace'); document.getElementsByTagName('img')[i].removeAttribute('hspace'); >>
Я бы предпочел не использовать javascript, но в данном случае я просто не вижу другой альтернативы. Так что пусть будет. Теперь добьем атрибут type в тэге ol:
ol < list-style-type:decimal; >/* Все браузеры */
А теперь атрибут bgcolor для body:
body < background-color:transparent; >/* Все браузеры */
Таблицы. Финальный шаг. В таблицах, в HTML4/4.01, есть ряд нежелательных атрибутов, которые активно использовались для верстки страниц. Но мы же не хотим, чтобы клиент использовал таблицы для верстки? Поэтому давайте отключим атрибуты width, height, bgcolor, valign и border:
table,tr,th,td < width:auto; /* Все браузеры */ height:auto; /* Все браузеры */ background-color:transparent; /* Все браузеры */ vertical-align:inherit; /* Все браузеры (включая IE) */ border:none; /* Все браузеры */ >
Подведем итоги:
Используя CSS-правила и минимальный javascript, нам удалось «отключить» большинство нежелательных тэгов и атрибутов, элегантно сохраняя естественное наследование. Нам не нужно «учить» клиента, он в любом случае должен будет использовать правильную разметку. С учетом одной, очень важной ремарки — очень важно предоставить клиенту достаточное количество описаных CSS-классов, чтобы он не был ограничен в работе с разметкой.
Все стили вместе:
font,basefont < color:inherit; /* Нормальные браузеры */ color:expression(this.parentNode.currentStyle['color']); /* IE */ font:inherit; /* Нормальные браузеры. Font вместо font-size для Оперы */ font-family:expression(this.parentNode.currentStyle['fontFamily']); /* IE */ font-size:100%; /* Все браузеры */ >center < text-align:inherit; /* Нормальные браузеры */ text-align:expression(this.parentNode.currentStyle['textAlign']); /* IE */ >s,strike,u < text-decoration:inherit; /* Нормальные браузеры */ text-decoration:expression(this.parentNode.currentStyle['textDecoration']); /* IE */ >*[align] < text-align:inherit; >/* Нормальные браузеры */ * < text-align:expression(this.align ? this.parentNode.currentStyle['textAlign'] : ''); >/* IE */ img < margin:0; border:none; >/* Все браузеры */ ol < list-style-type:decimal; >/* Все браузеры */ body < background-color:transparent; /* Все браузеры */ >table,tr,th,td < width:auto; /* Все браузеры */ height:auto; /* Все браузеры */ background-color:transparent; /* Все браузеры */ vertical-align:inherit; /* Все браузеры (включая IE) */ border:none; /* Все браузеры */ >
Вольный перевод и подготовка статьи по материалам monc.se