выделение содержимого по клику для копирования

Всем, привет. Сегодня небольшая фишка о том, как сделать, чтобы после щелчка мышкой по полю, его содержимое выделилось цветом для копирования. Многие наверняка видели такое на некоторых сайтах.


Для поля под контент будем использовать тег <textarea>.  Значения: rows="4" ( высота поля ) и cols="50" ( ширина поля ) устанавливаются из расчёта внутреннего содержимого. Предложу для вас 2 варианта.

1. Поле для контента без всяких стилей

<textarea rows="4" cols="50" onclick="javascript:this.focus();this.select();">
Здесь будет ваш текст, код, любое содержание, которое для копирования отметится цветом при нажатии на него левой кнопкой мыши.
</textarea>

Пример



2. Добавим немного красоты, чтобы не было совсем скучно.

<style>
textarea:hover {
-webkit-box-shadow:0px 0px 9px rgba(0,0,0,0.4), 0px 0px 0px 1px rgba(188,188,188,0.1);
-moz-box-shadow:0px 0px 9px rgba(0,0,0,0.4), 0px 0px 0px 1px rgba(188,188,188,0.1);
box-shadow:0px 0px 9px rgba(0,0,0,0.4), 0px 0px 0px 1px rgba(188,188,188,0.1);
}
</style>
<textarea rows="4" cols="50" onclick="javascript:this.focus();this.select();">
Здесь содержимое которое будет выделяться при нажатии на поле левой кнопкой мышки.
</textarea>

Выглядеть будет так (это картинка)
выделить содержимое цветом
Сегодня всё . До встречи.  Храни вас Бог мои друзья.


Получайте новые сообщения с блога прямо на почту

Введите Ваш email


8 комментариев:

  1. Виктория, и куда потом вставлять эти коды. Ты не написала. Или я уже ничего не вижу. После трагедии в нашем областном центре мы все в школе ходим в слезах. Сегодня была панихида в нашем городе на центральной площади. В Кемерово утром прилетел В.В. Путин. Погибло людей намного больше, чем сообщают в новостях.

    ОтветитьУдалить
  2. Думала. что все уже знают что в режиме HTML.
    Ирина весь мир в шоке и слезах. Все следят с 25 о событиях. Здравомыслящие люди понимают что больше погибло , да и пишут об этом в неофициальных источниках. Ужас, трагедия, шок.

    ОтветитьУдалить
  3. Виктория, а цвет выделения можно менять. В коде я не вижу значения цвета:))

    ОтветитьУдалить
    Ответы
    1. Лариса, в коде конечно нет. Цвет будем именно тем как при копировании любого участка страницы. А вообще как изменить цвет копируемого текста на свой я писала здесь
      http://www.shpargalochki.ru/2015/05/izmenit-cvet-vydelennogo-teksta.html Можно на отдельной странице сделать другой цвет или применить ко всем страницам. Вот у меня он настроен чёрным везде - попробуйте здесь, а на странице со ссылкой бордовый.

      Удалить
  4. Вика, я не на тему, все в Болгарии сочувствуют трагедии в Кемерово. А теперь у нас 12 градусов по Цельсию, солнечно, 18 часов и 50 минут.

    ОтветитьУдалить
    Ответы
    1. Ой, Пепа, как всем тяжело. Люди во всём мире остаются людьми . Солнышка вам всем. У нас на Урале 0 и снег ещё лежит. ждём настоящую весну.

      Удалить
  5. Интересная фишка. Несколько раз замечала подобную. Теперь знаю, как сделать. Спасибо!
    Эх, когда уже весна наступит? :)

    ОтветитьУдалить
    Ответы
    1. Олли, календарная уже наступила месяц назад. Для меня весна это в мае только. А фишка интересная. надо ещё будет по теме кое что добавить. Спасибо.

      Удалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML

Пользовательский поиск