Подтвердить что ты не робот

Как отключить поля формы с помощью CSS?

Можно ли отключить поля формы с помощью CSS? Я, конечно, знаю об отключенном атрибуте, но можно ли это указать в правиле CSS? Что-то вроде -

<input type="text" name="username" value="admin" >
<style type="text/css">
  input[name=username] {
    disabled: true; /* Does not work */
  }
</style>

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

Очень любопытно, что у вас есть видимые и отображаемые свойства в CSS, но не включать/отключать. Есть ли что-нибудь подобное в стандарте HTML5 по-прежнему работает, или даже что-то нестандартное (специфичное для браузера)?

4b9b3361

ОТВЕТЫ

Ответ 1

Поскольку правила выполняются в JavaScript, почему бы не отключить их с помощью javascript (или в моем примере с примерами, jQuery)?

$('#fieldId').attr('disabled', 'disabled'); //Disable
$('#fieldId').removeAttr('disabled'); //Enable

UPDATE

Функция attr больше не является основным подходом к этому, как было указано в комментариях ниже. Теперь это делается с помощью функции prop.

$( "input" ).prop( "disabled", true ); //Disable
$( "input" ).prop( "disabled", false ); //Enable

Ответ 2

Вы можете подделать отключенный эффект с помощью CSS.

pointer-events:none;

Вы также можете изменить цвета и т.д.

Ответ 3

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

Очень любопытно, что вы думаете, что это очень любопытно. Вы неправильно понимаете цель CSS. CSS не предназначен для изменения поведения элементов формы. Это означало изменить только стиль. Скрытие текстового поля не означает, что текстовое поле больше не существует или браузер не будет отправлять свои данные при отправке формы. Все, что он делает, это скрыть его от глаз пользователя.

Чтобы фактически отключить ваши поля, вы должны использовать атрибут disabled в HTML или свойство DOM disabled в JavaScript.

Ответ 4

Это может быть полезно:

<input type="text" name="username" value="admin" >

<style type="text/css">
input[name=username] {
    pointer-events: none;
 }
</style>

Update:

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

 <input type="text" name="username" value="admin" tabindex="-1" >

 <style type="text/css">
  input[name=username] {
    pointer-events: none;
   }
 </style>

Ответ 5

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

disabled="disabled"

Ответ 6

Практическое решение - использовать CSS для скрытия ввода.

Чтобы сделать это естественным путем, вы можете написать два входа html для каждого фактического ввода (один включен и один отключен), а затем использовать javascript для управления CSS, чтобы отображать и скрывать их.

Ответ 7

первый раз, отвечая на что-то, и, похоже, немного опоздал...

Я соглашаюсь сделать это с помощью javascript, если вы уже используете его.

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

Пример:

<div id=test class=stdInput>
    <label class=stdInputLabel for=selecterthingy>A label for this input</label>
    <label class=selectWrapper>
         <select id=selecterthingy>
             <option selected disabled>Placeholder</option>
             <option value=1>Option 1</option>
             <option value=2>Option 2</option>
         </select>
    </label>
</div>

Я могу разместить класс disabled на обертке div

.disabled { 
    position : relative; 
    color    : grey;
}
.disabled:after {
    position :absolute;
    left     : 0;
    top      : 0;
    width    : 100%;
    height   : 100%;
    content  :' ';
}

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

Мой пример JSFiddle

Ответ 8

Я всегда использую:

input.disabled {
    pointer-events:none;
    color:#AAA;
    background:#F5F5F5;
}

а затем применить класс css к полю ввода:

<input class="disabled" type="text" value="90" name="myinput" id="myinput" />

Ответ 9

Вы не можете этого сделать, я боюсь, но вы можете сделать следующее в jQuery, если вы не хотите добавлять атрибуты в поля. Просто поместите это в свой тег <head></head>

$(document).ready(function(){ 
  $(".inputClass").focus(function(){
    $(this).blur();
  }); 
});

Если вы создаете поля в DOM (с JS), вы должны сделать это вместо:

$(document).ready(function(){ 
  $(document).on("focus", ".inputClass", function(){
    $(this).blur();
  }); 
});

Ответ 10

Это можно сделать для некритической цели, наложив надпись поверх вашего элемента ввода. Вот мой пример в чистом HTML и CSS.

https://jsfiddle.net/1tL40L99/

    <div id="container">
        <input name="name" type="text" value="Text input here" />
        <span id="overlay"></span>
    </div>

    <style>
        #container {
            width: 300px;
            height: 50px;
            position: relative;
        }
        #container input[type="text"] {
            position: relative;
            top: 15px;
            z-index: 1;
            width: 200px;
            display: block;
            margin: 0 auto;
        }
        #container #overlay {
            width: 300px;
            height: 50px;
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: 2;
            background: rgba(255,0,0, .5);
        }
    </style>

Ответ 11

Невозможно использовать CSS для этой цели. Мой совет состоит в том, чтобы включить javascript-код, где вы назначаете или изменяете класс css, применяемый к входам. Что-то вроде этого:

function change_input() {
	$('#id_input1')
		.toggleClass('class_disabled')
		.toggleClass('class_enabled');
		
	$('.class_disabled').attr('disabled', '');
	$('.class_enabled').removeAttr('disabled', '');
}
.class_disabled { background-color : #FF0000; }
.class_enabled { background-color : #00FF00; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form> 	
	Input: <input id="id_input1" class="class_enabled" />		
	<input type="button" value="Toggle" onclick="change_input()";/>	
</form>