Отключить текстовое поле с помощью CSS

Как отключить текстовое поле в CSS? В настоящее время у нас есть текстовое поле, которое можно включить/отключить в зависимости от свойства в модели. У нас есть asp.net MVC view; в зависимости от значения свойства Model нам нужно либо сделать текстовое поле, либо текстовое поле только для чтения. мы думали сделать это, применив CSS к элементу управления представлением. Кто-то сделал это раньше?

Ответы

Ответ 1

CSS не может отключить текстовое поле, однако вы можете отключить отображение или видимость.

display: none;
visibility: hidden;

Или вы также можете установить атрибут HTML:

disabled="disabled"

Ответ 2

вы можете отключить через css:

pointer-events: none;

Не работает везде.

Ответ 3

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

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

<input type="text" name="lname" disabled />

Демо: http://jsfiddle.net/p6rja/

Или, если хотите, вы можете установить это через JavaScript:

document.forms['formName']['inputName'].disabled = true;​​​​

Демо: http://jsfiddle.net/655Su/

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

// Similar to <input value="Read-only" readonly>
document.forms['formName']['inputName'].readOnly = true;

Демо: http://jsfiddle.net/655Su/1/

Это не меняет пользовательский интерфейс элемента, поэтому вам нужно будет сделать это самостоятельно:

input[readonly] { 
    background: #CCC; 
    color: #333; 
    border: 1px solid #666 
}

Вы также можете настроить таргетинг на любой отключенный элемент:

input[disabled] { /* styles */ }

Ответ 4

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

Вы можете собрать что-то вместе, поместив текстовое поле под абсолютно позиционированный прозрачный элемент с z-index... Но это просто глупо, плюс вам понадобится второй HTML-элемент.

Вы можете, однако, стилизовать отключенные текстовые поля (если это то, что вы имеете в виду) в CSS, используя

input[disabled] { ... }

от IE7 вверх и во всех других основных браузерах.

Ответ 5

** просто скопируйте этот код и запустите, вы можете отключить текстовое поле **

<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title> 

<style>.container{float:left;width:200px;height:25px;position:relative;}
       .container input{float:left;width:200px;height:25px;}
       .overlay{display:block;width:208px;position:absolute;top:0px;left:0px;height:32px;} 
</style>
 </head>
<body>
      <div class="container">
       <input type="text" value="[email protected]" />
       <div class="overlay">
        </div>
       </div> 
</body>
</html>

Ответ 6

Идя дальше на ответ Пекки, у меня был стиль "style1" в некоторых из моих текстовых полей. Вы можете создать "style1 [disabled]", чтобы вы создавали только отключенные текстовые поля, используя стиль "style1":

.style1[disabled] { ... }

Работает нормально на IE8.

Ответ 7

Просто попробуйте это.

<asp:TextBox ID="tb" onkeypress="javascript:return false;" width="50px" runat="server"></asp:TextBox>

Это не позволит вводить символы внутри TextBox.

Ответ 8

Краткий ответ

Нет, вы не можете отключить текстовое поле с помощью CSS.

Длинный ответ

pointer-events: none работает, но в IE свойство CSS работает только с IE 11 или выше, поэтому оно работает не везде в любом браузере. За исключением этого вы не можете отключить текстовое поле с помощью CSS.

Однако вы можете отключить текстовое поле в HTML следующим образом:

<input value="...." readonly />

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

<input value="...." disabled />

Таким образом, разница между этими двумя вариантами отключения текстового поля заключается в том, что disabled не может позволить вам передать значение текстового поля input, но readonly разрешает.

Для получения дополнительной информации о разнице между этими двумя см. "В чем разница между disabled="disabled" и readonly="readonly".

Ответ 9

Другой способ - сделать его доступным только для чтения.

<input type="text" id="txtDis" readonly />