Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.01.2023, 00:35
Кандидат Javascript-наук
Отправить личное сообщение для 12345678 Посмотреть профиль Найти все сообщения от 12345678
 
Регистрация: 03.09.2012
Сообщений: 109

Исключение добавления ссылки, если выделен текст в теге <pre>
Доброго времени суток, уважаемые специалисты.

Имеется такой замечательный скрипт:

document.addEventListener('copy', (event) => {
  const container = document.querySelector('#content');
  const selection = document.getSelection();
  const text = selection.toString();
  
  if(
    text.length >= 50 && (
      container.contains(selection.anchorNode) ||
      container.contains(selection.focusNode) 
    )  
  ) {
    event.clipboardData.setData('text/plain', `${text}\nИсточник: ${document.location.href}`);
    event.preventDefault();
  }
});


Подскажите, пожалуйста, как можно в него добавить исключение на срабатывание, если выделен текст (или если даже часть выделенного текста находится в теге (а часть вне тега)), который находится в тегах <pre>... </pre>

Тег может быть без класса, а может быть и с классом <pre class="nekoe_imya">... </pre>
Ответить с цитированием
  #2 (permalink)  
Старый 05.01.2023, 01:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,070

12345678,
строка 5
let el = selection.getRangeAt(0).cloneContents();
  if(el.querySelector('pre')) return;
Ответить с цитированием
  #3 (permalink)  
Старый 05.01.2023, 10:08
Кандидат Javascript-наук
Отправить личное сообщение для 12345678 Посмотреть профиль Найти все сообщения от 12345678
 
Регистрация: 03.09.2012
Сообщений: 109

рони, спасибо, что откликнулись. Я добавил строчки, если текст захватывается, который в pre, то не добавляется ссылка, а если же выделяется чисто текст, что находится в pre, то добавляется. А как сделать, чтобы в последнем случае тоже не добавлялась?
<div id="content">
<p>Самая мощная в мире ветряная турбина запущена в опытную эксплуатацию. Установка Vestas V236-15 MW собрана для оценки эксплуатационных характеристик на полигоне в Эстерильд в Западной Ютландии.</p>
<div class="code-wrap" data-tip="Двойной клик для выделения кода">
<pre class="code-clear">Тут текст, при выделении которого не должен срабатывать скрипт вставки ссылки на источник при копировании в буфер обмена.</pre>
</div>
<p>Диаметр ротора установки составляет 236 м при длине лопастей 115,5 м. Вырабатываемая на пике мощность достигает 15 МВт. На основе этой установки разработаны проекты целого ряда морских ветроэлектростанций в Европе и США.</p>
</div>
<script>
var ua = window.navigator.userAgent;
var isIE = /MSIE|Trident/.test(ua);

if ( !isIE ) {
document.addEventListener('copy', (event) => {
  const container = document.querySelector('#content');
  const selection = document.getSelection();
  const text = selection.toString();
  
  let el = selection.getRangeAt(0).cloneContents();
  if(el.querySelector('pre')) return;

  if(
    text.length >= 10 && (
      container.contains(selection.anchorNode) ||
      container.contains(selection.focusNode) 
    )  
  ) {
    event.clipboardData.setData('text/plain', `${text}\nИсточник: ${document.location.href}`);
    event.preventDefault();
  }
}); };
</script>
Ответить с цитированием
  #4 (permalink)  
Старый 05.01.2023, 10:34
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,070

12345678,
18 - 19 заменить на
let el = selection.containsNode(document.querySelector('.code-clear'), true);
  if(el) return;
Ответить с цитированием
  #5 (permalink)  
Старый 05.01.2023, 12:03
Кандидат Javascript-наук
Отправить личное сообщение для 12345678 Посмотреть профиль Найти все сообщения от 12345678
 
Регистрация: 03.09.2012
Сообщений: 109

рони, спасибо за ответ.
Выяснилась ещё одна проблемка - если на странице больше одного блока <pre>, то скрипт для последующих всё равно добавляет ссылку.
Ответить с цитированием
  #6 (permalink)  
Старый 05.01.2023, 13:16
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,070

Сообщение от 12345678
если на странице больше одного блока
а подумать никак? если элементов много, наверно, нужно каждый проверить
for (let node of document.querySelectorAll('.code-clear'))
    if(selection.containsNode(node, true)) return;
Ответить с цитированием
  #7 (permalink)  
Старый 05.01.2023, 14:23
Кандидат Javascript-наук
Отправить личное сообщение для 12345678 Посмотреть профиль Найти все сообщения от 12345678
 
Регистрация: 03.09.2012
Сообщений: 109

рони
Спасибо большое Теперь идеально.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
При клике ссылки, открыть DIV блок, и при клике ещё раз, закрыть его Simon Общие вопросы Javascript 59 28.05.2017 17:31
поиск текст - подсветка - переход к найденному rdfhnbhf jQuery 1 05.07.2012 12:49
Вопрос: И опять про offsetLeft... sigurd Общие вопросы Javascript 11 04.10.2010 14:06
Высота скрытого содержания в теге, если для него установлено overflow:hiden; paratrooper1981 Общие вопросы Javascript 19 23.12.2009 18:26
Вопрос по относительному позиционированию DIV XPOMOB (X)HTML/CSS 11 15.07.2009 17:02