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

Данные скрипты предназначены для форумов, блогов и сайтов на платформе uCoz, где часто используются блоки <code> и <quote>. Они позволяют посетителям быстро выделять содержимое блока для копирования без необходимости вручную проводить мышкой по всему тексту.

Скрипт №1 — кнопка «Выделить код»

Первый вариант добавляет специальную ссылку «выделить код» рядом с заголовком блока кода.

После нажатия пользователь моментально выделяет весь текст внутри блока, после чего может легко скопировать его в буфер обмена.

Возможности:

автоматическое добавление кнопки выделения;

поддержка разных браузеров;

корректная работа с блоками кода;

удобное копирование больших фрагментов;

подходит для публикации HTML-, CSS-, JS-кода и других примеров.

Код
<script>
function selectCode(a){
var e=a.parentNode.parentNode.getElementsByClassName('codeMessage')[0];
if(window.getSelection){
var s=window.getSelection();
if(s.setBaseAndExtent[0]){
s.setBaseAndExtent(e,0,e,e.innerText.length-1);
}else{
var r=document.createRange();
r.selectNodeContents(e);
s.removeAllRanges();
s.addRange(r);}
}else if(document.getSelection){
var s=document.getSelection();
var r=document.createRange();
r.selectNodeContents(e);
s.removeAllRanges();
s.addRange(r);
}else if(document.selection){
var r=document.body.createTextRange();
r.moveToElementText(e);
r.select();}};
$('.bbCodeName').append().html('<a href="javascript://" onclick="selectCode(this);return false;" class="right" style="color: #92aabb;">выделить код</a>');
</script>


Особенно полезен для сайтов с уроками, инструкциями, скриптами и материалами для веб-разработчиков.

Скрипт №2 — выделение кода или цитаты по клику

Второй вариант работает ещё проще: достаточно нажать мышкой на блок с кодом или цитатой, и весь текст внутри автоматически выделяется.

Поддерживаются элементы:

блоки кода (codeMessage);

блоки цитат (quoteMessage).

Преимущества:

не требует дополнительных кнопок;

минимальная нагрузка на страницу;

быстрое копирование информации;

удобство для пользователей мобильных и настольных устройств.

Какой скрипт выбрать?

Если вам нужна привычная кнопка «Выделить код» — используйте первый вариант.

Если хочется сделать интерфейс максимально простым и современным — второй вариант будет удобнее: пользователь просто нажимает на блок и сразу получает выделенный текст.

Оба скрипта отлично подходят для сайтов uCoz, где часто публикуются:

готовые скрипты;
HTML-коды;
CSS-оформления;
инструкции;
технические статьи.

Установка занимает всего несколько секунд — достаточно добавить код в глобальный блок или перед закрывающим тегом </body>.

Код
<script>$('div.codeMessage, div.quoteMessage').on('click', function() {  
const element = this;  
try {  
if (window.getSelection && element.innerText) {  
const selection = window.getSelection();  
const range = document.createRange();  
range.selectNodeContents(element);  
selection.removeAllRanges();  
selection.addRange(range);  
} else {  
console.warn('Выделение текста не поддерживается или элемент является пустым.');  
}  
} catch (error) {  
console.error('Ошибка при выборе текста:', error);  
}  
  });  
  // Разработчик: jaguar37rus  
  // Сайт: https://htmlstart.ucoz.net/</script>