Отключите текстовое поле с помощью CSS
Как отключить текстовое поле в CSS? В настоящее время у нас есть текстовое поле на наш взгляд, которое может быть позволено/отключено в зависимости от свойства в модели. У нас есть представление asp.net MVC; в зависимости от значения свойства Model мы должны или представить текстовое поле или текстовое поле только для чтения. мы думали о выполнении этого путем применения CSS к управлению представлением. Кто-то сделал это ранее?
4 ответа
CSS не может отключить текстовое поле, однако вы можете отключить отображение или видимость.
display: none;
visibility: hidden;
Или вы также можете установить HTML-атрибут:
disabled="disabled"
Вы не можете ничего отключить с помощью CSS, это функциональный вопрос. CSS предназначен для дизайна. Вы можете создать впечатление, что текстовое поле отключено, установив для него размытые цвета.
Чтобы действительно отключить элемент, вы должны использовать атрибут disabled boolean:
<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-index... Но это просто глупо, к тому же вам в любом случае понадобится второй 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="rvi.tom@gmail.com" />
<div class="overlay">
</div>
</div>
</body>
</html>