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

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

В HTML вы можете написать: <textarea id='mytextarea' disabled></textarea>
Из jQuery вы можете: $("#mytextarea").attr("disabled","disabled");
CSS
? Можно ли отключить текстовое поле с помощью CSS?

Ответ 1

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

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

Ответ 2

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

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

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

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

Ответ 3

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

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

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

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

Ответ 4

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

Вы можете сделать элементы полностью незаметными с помощью 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>

Ответ 5

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

Ответ 6

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

Ответ 7

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

<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, чтобы поймать событие. Затем мы сообщим событию, что мы не хотим, чтобы он выполнял свое поведение по умолчанию. Как я говорю, его взломать, но его эффективный в щепотке.

Ответ 8

Согласовано с приведенными выше ответами: "К сожалению, в чистом CSS это невозможно". Но если вы можете сделать события указателя родительского элемента ни одним, тогда он выполнит свою работу, но его можно обратить вспять из элементов проверки

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

.disabled {
  pointer-events: none;;
}