Блог веб разработки

Блог веб-разработки статьи | видеообзоры | исходный код

read-write css

Приветствую вас друзья! Здесь и сейчас мы рассмотрим псевдоселектор 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

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

Оцените статью

Еще статьи

Пространство имен в php

CSS before after

Переименование и удаление файлов в GIT

Fetch API в HTML5

Псевдоселектор selection в css

Масштабирование элемента в css, свойство zoom

Отправка почты средствами PHP через функцию mail

Как я пришел к этому.

Комментарии

Проверочный код

В данном разделе пока нет комментариев!

История

    ПОДПИСКА

    • Подпишись и получай информацию о выходе новых статей на почту! Просто введите свою почту, нажмите кнопку подписаться. На почту должно будет прийти сообщение с потверждением подписки. Если сообщение не пришло проверьте раздел спам или попробуйте другую почту. Также по всем техническим проблемам вы можете написать в поддержку

    НОВОСТИ

    • Всем привет! Запустил новый сервис для поиска и бесплатного скачивания, прослушивания аудиокниг. Здесь вы можете найти множество литературы и прослушать ее. Вскоре возобновлю написание статей.