Приветствую вас друзья! Здесь и сейчас мы рассмотрим псевдоселектор read-write, узнаем с какими элементами его можно использовать и в каких ситуациях. Погнали!

read-write - сравнительно молодой псевдоселектор css поэтому чтобы он поддерживался в современных браузерах без использования вендорных префиксов нам не обойтись. Его можно и нужно применять только к тем элементам которые мы можем отредактировать (textarea, input и т. п.).

Рассмотрим пример:

Допустим у нас есть некое поле input. И мы хотим с помощью рамки показать, можем мы его редактировать или нет.

<style>
input{
      border:1px solid red;
    }
    input:read-write {
        border:1px solid green;
    }

    input:-moz-read-write{
          border:1px solid green;
    }
</style>
<input type="text" name="name"   placeholder="Имя пользователя" />

Если рамка будет красная - редактирование запрещено, зеленное редактирование разрешено. Изначально к полю применяется красная рамка(запрещено), а затем с помощью read-write она переопределяется на зеленную(разрешено). Заметьте что здесь мы используем вендорный префикс -moz, это для поддержки псевдоселектора в браузере mozila firefox. read-write в чистом виде поддерживается во всех браузерах (webkit). Псевдоселектор с префиксом и без, обязательно пишутся раздельно.

Такая запись:

input:read-write, input:-moz-read-write {
        border:1px solid green;
    }

работать не будет. Помните про это!

Теперь заблокируем редактирование поля с помощью атрибута readonly.

<input type="text" name="name" readonly  placeholder="Имя пользователя" />

Псевдоселектор read-write перестанет работать так как мы не можем отредактировать поле Input и наша рамка будет красной.

Вы можете использовать псевдоселектор read-write по разному:

*:read-write{
    padding:10px;
}
*:-moz-read-write{
    padding:10px;
}

Данные стили определять всем редактируемым элементам свойство padding со значением 10px.

Используя атрибут contenteditable со значением true можно сделать редактируемый элемент.

Пример:

<style>
    #p:read-write{
      font-size:22px;
    }
    #p:-moz-read-write{
      font-size:22px;
    }
  </style>
  <p  id="p">Привет </p>
  <script>
    document.querySelector("#p").addEventListener('click', function(){
        if(this.getAttribute("contenteditable") === null || this.getAttribute("contenteditable") === "false"){
          this.setAttribute("contenteditable", true);
        }
    });
      document.querySelector("#p").addEventListener('blur', function(){
      if(this.getAttribute("contenteditable") !== null || this.getAttribute("contenteditable") === "true"){
          this.setAttribute("contenteditable", false);
        }
      });

  </script>

Здесь мы используем тег "p", изначально это не редактируемый элемент. Благодаря javascript мы по клику через атрибут contenteditable со свойством true делаем его редактируемым. Заметьте что у нас задан псевдоселектор read-write с размером шрифта 22px. В итоге как только тег "p" становится редактируемым, его текст увеличивается. Если сместить фокус от редактирования текста, элемент "p" снова станет не редактируемым. Вот такой интересный эффект мы создали!

На этом данная статья подошла к концу. Надеюсь данная информация была для вас полезной.

Подписывайтесь на

мой блог вконтакте youtube

С вами был Грибин Андрей. До скорого!