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

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

Для поля под контент будем использовать тег <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