Select html readonly: javascript — HTML form readonly SELECT tag/input — Вебджем.рф

Содержание

html — селектор только для чтения не работает с тегом select?

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

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

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

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

Я не могу отключить его, потому что он не будет отправляться вместе с деталями формы, это то, что я пробовал в редакторе w3school: —

 select: -moz-только для чтения {
  /* Для Firefox */
  события-указатели: нет;
}

выбрать: только для чтения {
  события-указатели: нет;
}

  ПРИНЯТО 
<выбрать только для чтения>
  <опция>1
  <опция> 2
  <опция>3



 UNACCEPTED : здесь также применяется селектор 
<выбрать>
  <опция>1
  <опция>2
  <опция>3

html
css

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

 select[только для чтения]:-moz-только для чтения {
  /* Для Firefox */
  события-указатели: нет;
}

выберите [только для чтения]: только для чтения {
  события-указатели: нет;
}

  ПРИНЯТО 
<выбрать только для чтения>
  <опция>1
  <опция>2
  <опция>3



 UNACCEPTED : здесь также применяется селектор 
<выбрать>
  <опция>1
  <опция>2
  <опция>3

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

Добавление некоторых деталей на основе комментариев,

Вы можете отключить фокус вкладки, используя атрибут tabindex со значением, установленным на false в теге select

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

 2
 В соответствии со спецификацией элемент   . С  отключен атрибут , вам не нужно указывать дополнительный CSS, чтобы отключить взаимодействие мыши с элементом.
 Вот как это будет работать:
  ПРИНЯТО 
<выбрать отключено>
  <опция>1
  <опция>2
  <опция>3



 UNACCEPTED : здесь также применяется селектор 
<выбрать>
  <опция>1
  <опция>2
  <опция>3
 
 4
 Зарегистрируйтесь или войдите в систему 
  Зарегистрируйтесь с помощью Google
 Зарегистрироваться через Facebook
 Зарегистрируйтесь, используя адрес электронной почты и пароль
 Опубликовать как гость 
 Электронная почта
 Требуется, но никогда не отображается
 Опубликовать как гость 
 Электронная почта
 Требуется, но не отображается
 HTML-атрибут: только для чтения — HTML: язык гипертекстовой разметки 
 Логический атрибут   только для чтения  , если он присутствует, делает элемент неизменяемым, то есть пользователь не может редактировать элемент управления.
 Если для элемента ввода указан атрибут  только для чтения , поскольку пользователь не может редактировать ввод, элемент не участвует в проверке ограничения.
 Атрибут  только для чтения  поддерживается  текст  ,  поиск  ,  URL  ,  тел  ,  электронная почта  ,  пароль 9002 6,  дата ,  месяц ,  неделя ,  время ,  datetime-local  и  номер       и элементы управления формой   </code> </code>. Если присутствует в любом из этих входных типов и элементов, будет соответствовать псевдокласс <code> <code> :только для чтения </code> </code>. Если атрибут не включен, будет соответствовать псевдокласс <code> <code> :чтение-запись </code> </code>. </p> <p> Атрибут не поддерживается или не относится к <code> <code> <select> </code> </code> или типам ввода, которые уже не являются изменяемыми, например, флажок и радио, или не могут по определению начинаться со значения, например типа ввода файла.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/i.stack.imgur.com/cdv8o.png' /><noscript><img loading='lazy' src='/800/600/https/i.stack.imgur.com/cdv8o.png' /></noscript>  диапазон и цвет, так как оба имеют значения по умолчанию. Он также не поддерживается для скрытых, так как нельзя ожидать, что пользователь заполнит скрытую форму. Он также не поддерживается ни для одного из типов кнопок, включая 9.0025 изображение </code> . </p> <p> <strong> Примечание: </strong> Только текстовые элементы управления можно сделать доступными только для чтения, поскольку для других элементов управления (таких как флажки и кнопки) нет полезного различия между доступом только для чтения и отключением, поэтому атрибут <code> только для чтения </code> не применяется. . </p> <p> Если вход имеет атрибут <code> только для чтения </code>, к нему также применяется псевдокласс <code> :только для чтения </code>. И наоборот, входные данные, которые поддерживают атрибут <code> только для чтения </code>, но не имеют установленного атрибута, соответствуют <code> :чтение-запись </code> псевдокласс. </p> <h4><span class="ez-toc-section" id="i-4"> Взаимодействия атрибутов </span></h4> <p> Разница между <code> отключенным </code> и <code> только для чтения </code> заключается в том, что элементы управления только для чтения могут по-прежнему функционировать и по-прежнему могут быть сфокусированы, в то время как отключенные элементы управления не могут получать фокус и не отправляются вместе с формой и, как правило, не работают как управления, пока они не будут активированы.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/community.ptc.com/legacyfs/online/27525_read_only.png' /><noscript><img loading='lazy' src='/800/600/https/community.ptc.com/legacyfs/online/27525_read_only.png' /></noscript>  </p> <p> Поскольку поле, доступное только для чтения, не может изменить свое значение в результате взаимодействия с пользователем, <code> требуется </code>, не влияет на ввод с помощью <code> Также указан атрибут только для чтения </code>. </p> <p> Единственным способом динамического изменения значения атрибута только для чтения является сценарий. </p> <p> <strong> Примечание: </strong> Требуемый атрибут </code> <code> не разрешен для входных данных с указанным атрибутом </code> только для чтения <code>. </p> <h4><span class="ez-toc-section" id="i-5"> Удобство использования </span></h4> <p> Браузеры отображают атрибут </code> </code> только для чтения. </p> <h4><span class="ez-toc-section" id="i-6"> Проверка ограничения </span></h4> <p> Если элемент доступен только для чтения, то значение элемента не может быть обновлено пользователем и не участвует в проверке ограничения. </p> <h4><span class="ez-toc-section" id="HTML"> HTML </span></h4><pre> <div>
  <input type="text" value="Некоторое значение" readonly="readonly" />
  <label for="text">Текстовое поле</label>
</div>
<дел>
  <input type="date" value="2020-01-01" readonly="readonly" />
  <label for="date">Дата</label>
</div>
<дел>
  <input type="email" value="Некоторое значение" readonly="readonly" /><div id="yandex_rtb_3" 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_3",blockId:rtbBlockID,pageNumber:3,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_3").appendChild(g);(adsbygoogle=window.adsbygoogle||[]).push({});}})});window.addEventListener("load",()=>{var ins=document.getElementById("yandex_rtb_3");if(ins.clientHeight =="0"){ins.innerHTML=stroke3;}},true);</script> <label for="email">Электронная почта</label>
</div>
<дел>
  <input type="password" value="Some value" readonly="readonly" />
  <label for="pwd">Пароль</label>
</div>
<дел>
  <textarea readonly="readonly">Некоторое значение
  Сообщение

Select html readonly: javascript — HTML form readonly SELECT tag/input

html — селектор только для чтения не работает с тегом select?

Зарегистрируйтесь или войдите в систему

Опубликовать как гость

Опубликовать как гость

HTML-атрибут: только для чтения — HTML: язык гипертекстовой разметки

Результат

html.

Добавить комментарий Отменить ответ

Рубрики