Артём Мáлков

Выделение содержимого div по клику на него + копирование на jQuery

19 фев9 коммАртём Мáлков

Начну сразу с того, где это может вам пригодиться. Например, на своем сайте вы выкладываете статьи, где частью из них является материал, который пользователь может скачать для себя. Пример – мой сайт. Ниже я представляю код, который вы можете использовать в своих целях.

С помощью следующего скрипта вы сможете реализовать у себя данный функционал.

Непосредственно сам скрипт:

<script>

	function selectText(elementId) {
	
		var doc = document,
		text = doc.getElementById(elementId), range, selection;
		
		if(doc.body.createTextRange) {
		
			range = document.body.createTextRange();
			range.moveToElementText(text);
			range.select();
			
		} else if(window.getSelection) {
			
			selection = window.getSelection();
			range = document.createRange();
			range.selectNodeContents(text);
			selection.removeAllRanges();
			selection.addRange(range);

		}
		
	}
	
	$("#content").click(function() {
		
		selectText(this.id);
		document.execCommand("copy");

	});
	
</script>

Код вставляйте перед закрывающим тегом </body>.

Ваш контент, которому необходимо подключить данный функционал, оберните в:

<div id="content">Ваш текст</div>

Данный скрипт включает в себя автовыделение содержания всего блока + его копирование. Если вы не хотите, чтобы было автоматическое копирование, а только его выделение – удалите из скрипта эту строку:

document.execCommand("copy");

Удачных вам разработок!

Рекомендуем к просмотру
Определяем, был ли выделен текст на JavaScript/jQuery
Модули и скрипты
Как сделать скриншот элемента на JavaScript?
Модули и скрипты
Скрываем div в случае, если он пустой на JavaScript/jQuery/CSS
Статьи и советы
9
комментариев
Форма комментирования этого поста скрыта. Авторизуйтесь, чтобы расширить привилегии гостевого посещения и получить необходимую помощь от сообщества Pandoge.
    • 0
    1077
      •  Команда Pandoge
    4 апр в 23:47

    Константин, прошу прощение за ожидание.

    $("#content").click(function() {
    		
    	selectText(this.id);
    	document.execCommand("copy");
    
    });

    замените на:

    $("#content").mouseup(function() {
    		
    	var highlighted_text = "";
    	
    	if(window.getSelection) {
    	
    		highlighted_text = window.getSelection().toString();
    		
    	} else if (document.selection && document.selection.type != "Control") {
    		
    		highlighted_text = document.selection.createRange().text;
    	
    	}
    	
    	if(highlighted_text == "") {
          
    		selectText(this.id);
    		document.execCommand("copy");
          
    	}
    
    });
    • 0
    3
      •  Пользователь
    31 мар в 14:10

    Могу скинуть ссылку на тот скрипт

    • 0
    1077
      •  Команда Pandoge
    31 мар в 14:08

    Константин, подумаю сегодня-завтра над этим и отпишусь.

    • 0
    3
      •  Пользователь
    31 мар в 14:07

    Одновременно, я в сети находил скрипт, который по клику на текст весь его выделял, но и давал возможность выбрать отдельное слово. А ваш скрипт при попытке выделить слово, автоматом выделяет все содержимое.

    Но тот скрипт мне не подошел для других целей, а ваш хорош за исключением отсутствия этой опции...

    • 0
    1077
      •  Команда Pandoge
    31 мар в 13:54

    Константин, то есть сделать возможность выделения отдельный участков, а не всего текста?

    • 0
    3
      •  Пользователь
    31 мар в 13:47

    Добрый день,

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

    • 1
    766
      •  Гости
    2 сен в 17:02

    У меня несколько блоков коропировать и нет возможности присвоить уникальный id, Как поступить?

    • -1
    1077
      •  Команда Pandoge
    10 июн в 02:14

    Геннадий, с чего такие выводы?

    • -3
    766
      •  Гости
    9 июн в 16:51

    Ваш скрипт не работает!

Подняться наверх
Регистрация на сайте
Pandoge - уникальный проект, который собрал на своих страницах большой опыт многих людей в сфере сайтостроения.Присоединяйся и ты к сообществу, получай неограниченные знания и начинай творить свою мечту!Нажимая кнопку «Регистрация» вы даете согласие на обработку своих персональных данных.
Имя и фамилия
E-mail
Логин
Пароль
Регистрация
Pandoge