Input html readonly: Атрибут readonly | htmlbook.ru

Другими словами, он соответствует элементам, недоступным для редактирования пользователем. Элементы, попадающие в редактируемую категорию, включают:

• элемента (любого типа), которые не доступны только для чтения и не отключены. Это означает, что у них нет ни установлен атрибут только для чтения, а не отключенный атрибут .
• </code> с, которые не доступны только для чтения и не отключены (аналогично вводу <code> </code> с). </li> <li> Любой другой элемент, который не является <code> <input> </code> или <code> <textarea> </code> и имеет установленный атрибут <code> contenteditable </code>. </li> </ul> <p> Селектор псевдокласса <code>: только для чтения </code> соответствует любому элементу, который равен <em>, а не 9.0006 один из вышеперечисленных. </p><div id="yandex_rtb_1" class="yandex-adaptive classYandexRTB"></div> <script type="text/javascript">if(rtbW>=960){var rtbBlockID="R-A-744004-3";} else{var rtbBlockID="R-A-744004-5";} window.yaContextCb.push(()=>{Ya.Context.AdvManager.render({renderTo:"yandex_rtb_1",blockId:rtbBlockID,pageNumber:1,onError:(data)=>{var g=document.createElement("ins");g.className="adsbygoogle";g.style.display="inline";if(rtbW>=960){g.style.width="580px";g.style.height="400px";g.setAttribute("data-ad-slot","9935184599");}else{g.style.width="300px";g.style.height="600px";g.setAttribute("data-ad-slot","9935184599");} g.setAttribute("data-ad-client","ca-pub-1812626643144578");g.setAttribute("data-alternate-ad-url",stroke2);document.getElementById("yandex_rtb_1").appendChild(g);(adsbygoogle=window.adsbygoogle||[]).push({});}})});window.addEventListener("load",()=>{var ins=document.getElementById("yandex_rtb_1");if(ins.clientHeight =="0"){ins.innerHTML=stroke3;}},true);</script> <p> Ниже приведены примеры элементов, которые можно выбрать с помощью <code> :read-only </code> : </p><pre> <тип ввода = "текст" отключен> <тип ввода = "число" отключено> <input type="число" только для чтения> <textarea name="nm" cols="30" rows="10" только для чтения>

  Ниже приведены примеры элементов, которые могут быть выбраны , а не , с использованием :только для чтения — это элементы, которые можно выбрать с помощью :чтение-запись :

  <тип ввода="текст">
  
  <тип ввода="число">
  
   
  
   
                   

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

  :read-write может не применяться в некоторых браузерах, а стили, которые вы применяете с помощью :read-only , могут применяться к элементам, которые должны соответствовать :read-write . Для получения дополнительной информации об этом, пожалуйста, обратитесь к разделу «Поддержка браузера» ниже и просмотрите живую демонстрацию для живого примера того, как ваш браузер обрабатывает элементы.

  Общая информация и заметки

  Как и другие селекторы псевдоклассов, селектор :read-only может быть связан с другими селекторами, такими как :hover и с псевдоэлементами, такими как ::after , среди прочего. Например, следующее правило предоставит :hover стилей для (обычного) div на странице:

  div: только для чтения: наведите {
      цвет фона: #eee;
  }
  
  div: только для чтения: до {
      содержание: "?";
      цвет: темно-розовый;
  }
                   

  Примеры

  Все следующие действительны :только для чтения объявлений:

  .элемент: только для чтения: после {
      content: "Подпишись!";
      /* . .. */
  }
  
  ввод: только для чтения {
      цвет фона: #ааа;
      граница: 1px сплошная #888;
  }
  
  текстовая область: только для чтения: наведение {
      курсор: не разрешено;
  }
                   

  Живая демонстрация

  Следующая демонстрация применяет красную рамку к элементам, которые соответствуют :read-only , и применяет зеленую рамку к элементам, которые соответствуют : чтение-запись . Элементы, которые не соответствуют ни одному из двух селекторов псевдоклассов, имеют серую рамку. Результат может отличаться в зависимости от используемого вами браузера. См. подробности в разделе «Поддержка браузера» ниже.

  Посмотреть эту демонстрацию на игровой площадке Codrops

  Поддержка браузера

  Селектор псевдокласса :только для чтения поддерживается в Chrome, Edge, Safari и Opera 14+, а также на iOS.

  Поддерживается с 9Префикс 0003 -moz- в Firefox в виде :-moz-read-write .

  Селектор :read-only не поддерживается в Internet Explorer и Android.

  Примечания

  В Chrome, Firefox, Safari и Opera input , которые отключены (имеют установленный атрибут disabled ), обрабатываются как чтение-запись, а не только чтение, в отличие от того, что указано в спецификации. Таким образом, отключенные элементы не будут соответствовать :только для чтения в этих браузерах, даже если они должны.

  Дополнительная литература

  • Базовый модуль пользовательского интерфейса CSS, уровень 3
  • Отключенные элементы — HTML5

  Автор Сара Суэйдан. Последнее обновление сделано Маноэлой Илич 17 марта 2017 г. в 12:31.

  У вас есть предложение, вопрос или вы хотите внести свой вклад? Отправить вопрос.

  Дизайн веб-сайта

  — передовой опыт — только для чтения или отключено в элементах управления формой

  спросил 4 года 9 месяцев назад

  Изменено 2 года, 1 месяц назад

  Просмотрено 21к раз

  Я работаю над веб-сайтом/веб-службой. В одной из моих форм пользователю нужно ввести 2 значения: A и B. Затем, когда пользователь нажимает кнопку отправки, некоторая информация появляется в отдельном представлении рядом с формой.

  У меня есть дополнительный параметр C, этот параметр получает свое значение из A и B (в результате некоторых математических вычислений). Как только пользователь изменит A или B, C будет автоматически обновлен.

  Пользователь не может напрямую обновить значение C (только путем обновления A и/или B).

  Я не могу решить, должен ли элемент управления формы (текстовое поле) находиться в состоянии ReadOnly или Disable.

  Я заметил, что как ReadOnly, так и Disable дают одинаковый результат: пользователь может прочитать значение из текстового поля, но не может его редактировать. В случае ReadOnly элемент текстового поля выглядит так же, как обычное текстовое поле, в то время как в случае Disabled текстовое поле отображается серым, поэтому пользователь может понять, что это текстовое поле недоступно для редактирования.

  Теперь, когда и ReadOnly, и Disabled обеспечивают одинаковое поведение (с разным внешним видом), я не знаю, что выбрать? Каковы рекомендации по выбору между ReadOnly и Disabled? Когда я должен предпочесть использовать один над другим???

  Нативное текстовое поле

  Текстовое поле Material Design

  • веб-дизайн
  • disabled

  Использование элемента управления формы подразумевает, что в какой-то момент пользователь может напрямую изменить его (щелкнув/нажав на него), что здесь не так.

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

  Только для чтения

  • Этот атрибут указывает, что пользователь не может изменять значение элемента управления. Значение атрибута не имеет значения.
  • Атрибут «только для чтения» игнорируется, если значение атрибута type скрыто, диапазон , цвет, флажок , радио , файл или кнопка тип (например, кнопка или отправка).
  • Браузер не добавляет визуального стиля для элементов «только для чтения».

  Отключено

  • Этот атрибут указывает на то, что элемент управления формы недоступен для взаимодействия.
  • Событие click не будет отправляться для отключенных элементов управления.
  • Значение элемента управления «отключено» не будет отправлено с формой.
  • Отключенные элементы формы не получают фокуса и поэтому пропускаются при навигации по вкладкам.
  • Большинство браузеров (Chrome, Firefox, Edge, IE и другие) добавляют некоторые стили (выделены серым цветом) к отключенным элементам.

  Взаимодействие с пользователем

  Поскольку атрибуты ReadOnly и Disabled дают пользователю возможность просматривать значение элемента, но не изменять его. В то время как один из них — отключенный — обеспечивает визуальную обратную связь, дизайнер должен выбрать, может ли пользователь различать стандартный элемент и немодифицированный элемент.
  Если вы хотите, чтобы пользователь определил, что элемент находится в неизменяемом режиме, используйте «отключено».
  Если вы хотите, чтобы немодифицированный элемент отображался как остальные элементы формы, используйте «только для чтения».
  

  Функционально

  Только для чтения Элементы управления не могут быть изменены пользователем.

  Отключено Элементы управления не могут быть изменены пользователем или взаимодействовать с — вкладкой, фокусом, включенным в отправку формы (исключение: текст все еще может быть выделен). Кроме того, они имеют приглушенный стиль.

  Передовая практика

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

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

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

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

  Если вы разрешите ввод только для чтения, а не в отключенном, пользователь будет думать, что если он отредактирует значение C, то значения A и B будут изменены.

  Если входы значений A, B и C имеют одинаковый стиль, то пользователи не будут делать разницы между редактируемым вводом и нередактируемым вводом.