Что именно отвечает за выделение текста?

190

22 июля 2018, 21:50

Мне нужно, чтобы по клику текст копировался, но не выделялся. Не могу понять какой метод отвечает за выделение. Нагуглил, что selectNodeContents() выделяет текст, но это не срабатывает. Может кто то сможет подсказать ?

$(document).ready(function () { 
    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); 
        } 
    } 
    $("#linkCopy").click(function() { 
        selectText(this.id); 
        document.execCommand("copy"); 
        $('.link__url-icon').css("display", "block"); 
    }); 
});

.link__url { 
  display: flex; 
} 
.link__url-icon { 
  display: none; 
  margin-left: 15px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span class="link__url" id="linkCopy">https://www.google.com.ua/?hl=ru<span class="link__url-icon"><img src="./images/copy.svg"></span></span>

Answer 1

За выбирание отвечает объект selection, и выделяется текст после того, как ты добавил range.

Чтобы сбросить выделение достаточно просто удалить все выбранные интервалы, после того, как выполнится функция document.execCommand("copy");. Для этого можно вернуть объект selection из функции и очистить его непосредственно после вызова, например:

$(document).ready(function() { 
  function selectText(elementId) { 
    var doc = document, 
      text = doc.getElementById(elementId), 
      range, 
      selection; 
 
    if (window.getSelection) { 
      selection = window.getSelection(); 
      range = document.createRange(); 
      range.selectNodeContents(text); 
      selection.removeAllRanges(); 
      selection.addRange(range); 
      return selection; 
    } 
  } 
  $("#linkCopy").click(function() { 
    var s = selectText(this.id); 
    document.execCommand("copy"); 
    s.removeAllRanges(); 
    $('.link__url-icon').css("display", "block"); 
  }); 
});

.link__url { 
  display: flex; 
} 
 
.link__url-icon { 
  display: none; 
  margin-left: 15px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span class="link__url" id="linkCopy">https://www.googwwwle.com.ua/?hl=ru<span class="link__url-icon"><img src="./images/copy.svg"></span></span>