Отключение Textarea из CSS

Question

Для того, чтобы отключить текстовое поле (или любой другой элемент ввода), вы можете:

• В HTML, вы можете написать: <textarea id='mytextarea' disabled></textarea>

• От JQuery, вы можете : $("#mytextarea").attr("disabled","disabled");

• CSS? Можно ли отключить текстовое поле с помощью CSS?

Answer 1

Вы можете сделать текстовое поле отключенным, но его невозможно отключить.

Использование JavaScript, все, что вы действительно делаете изменения и тот же атрибут DOM, который установлен с помощью атрибута HTML disabled, поэтому с помощью HTML и JavaScript вы по существу делает то же самое. CSS, однако, полностью не соответствует этой картине, поскольку он не выполняет манипуляции с DOM любого типа - все, что он контролирует, - это внешний вид (визуальный или иной) элемента, а не его поведение.

Answer 2

Невозможно в чистом CSS, к сожалению ... вам придется использовать Javascript.

Answer 3

Нет, это невозможно сделать в CSS. Но вы можете стилизовать ввод как «отключенный» в CSS и использовать свойство maxlength = «0» в HTML-коде, чтобы люди не могли писать в нем. Кроме того, обязательно измените стиль указателя как правильный, чтобы люди не увидели указателя, который говорит им писать в поле.

Answer 4

CSS относится к стилям. Отключение элемента является функциональным.

Конечно, CSS становится более функциональным с такими вещами, как переходы, и это более серая область. Но цель CSS - сохранить его как стили, а не контролировать функциональный контроль элемента.

Нет, css не может отключить элементы.

Вы можете «подделать» отключенный элемент управления, чтобы визуально выглядеть отключенным.

Answer 5

Вот взломать.

<textArea class="tailLog">This page is waiting for something.</textArea> 

<script type="text/javascript"> 
    $(document).ready( function(){ 
      $(".tailLog").off().on("keydown", function(event){ 
       event.preventDefault(); 
       return; 
      }); 
    }); 
</script> 

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

Answer 6

В проекте у меня есть контейнер с текстовой областью и несколькими кнопками внутри. Чтобы отключить все, что я добавляемый класс к нему со следующим кодом:

.disabled { 
    opacity: 0.3; 
} 
.disabled:after { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
} 

<div class="disabled"> 
    <textarea></textarea> 
    <!-- textarea, buttons and other input elements --> 
</div> 

Хотя непрозрачности только для шоу,: после того, как элемент делает работу. Все элементы в контейнере больше не реагируют на щелчок и наведение мыши (до сих пор они будут работать с табулятором). Для моих нужд и в моем случае это прекрасно работает и является простым взломом css.

Answer 7

<textarea placeholder="This is a textarea, and it is not clickable" style="pointer-events: none"></textarea> 

Вы можете сделать элементы полностью unclickable с CSS: point-events: none;

textarea { 
 
    pointer-events: none; 
 
    border: 1px solid #eee; 
 
    padding: 20px; 
 
}

<textarea placeholder="This is a textarea, and it is not clickable"></textarea>