Как отключить текстовое поле в CSS? В настоящее время у нас есть текстовое поле в нашем представлении, которое может быть включено/отключено в зависимости от свойства в модели. У нас есть asp.net MVC view; в зависимости от значения свойства Model нам нужно либо сделать текстовое поле, либо текстовое поле только для чтения. Мы думали об этом, применяя CSS к элементу управления представлением. Кто-то сделал это раньше?Отключить текстовое поле с помощью CSS
CSS не может отключить текстовое поле, однако вы можете отключить отображение или видимость.
display: none;
visibility: hidden;
Или вы можете также установить HTMLattribute:
disabled="disabled"
Вы не можете отключить что-либо с помощью 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 */ }
Вы не можете отключить текстовое поле в CSS. Отключение его не является задачей для презентации, вам нужно будет сделать это в разметке HTML, используя атрибут disabled.
Возможно, вам удастся собрать что-то вместе, помещая текстовое поле под абсолютно позиционированный прозрачный элемент с z-индексом ... Но это просто глупо, плюс вам понадобится второй элемент HTML в любом случае.
Вы можете, однако, стиль инвалидов текстовые поля (если это то, что вы имеете в виду) в CSS с помощью
input[disabled] { ... }
от IE7 вверх и во всех других основных браузерах.
** просто скопировать вставить этот код и запустить вы можете увидеть текстовое поле отключенным **
<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>
** Код без объяснений, как правило, является плохим ответом на Stack ** В любом случае, это очень мало для целого кода. Это только дает возможность быть отключенным и довольно грязным способом. Если разработчик признает это действительным, они могут так же легко использовать 'input.disabled' и добавить класс через javascript по мере необходимости. Вы также можете использовать обработчик событий в 'focus' для' blur'. Решения, которые легко адаптируются к нескольким элементам. –
Идя дальше Пекка-х ответ, у меня был стиль «style1» в некоторых моих текстовых файлах. Вы можете создать «style1 [Выключено]», так что вы стиль только отключенные текстовые поля с помощью «style1» стиль:
.style1[disabled] { ... }
отлично работало на IE8.
можно отключить с помощью CSS:
pointer-events: none;
Не работает везде, хотя.
Просто попробуйте это.
<asp:TextBox ID="tb" onkeypress="javascript:return false;" width="50px" runat="server"></asp:TextBox>
Это не позволит вводить символы внутри текстового поля.
Осторожно с этим. Пользователи могут по-прежнему щелкнуть правой кнопкой мыши и выбрать вставку из контекстного меню для вставки данных в текстовое поле. –
Обратите внимание, что существует тонкая разница между 'readonly' и' disabled'. В обоих случаях значение является недействительным, но первое будет отправлять значение на серверную сторону, в то время как позднее это не будет. Кроме того, в большинстве веб-браузеров в другом браузере используется другой (более темный/серый) стиль по умолчанию. – BalusC