Отключение текстовой области из 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

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

.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.

Answer 3

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

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

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

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

Answer 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>

Answer 5

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

Answer 6

Вот взлом.

<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 7

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

Answer 8

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

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

.disabled {
  pointer-events: none;;
}