Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Почему не работает выделение по клику? (https://javascript.ru/forum/events/75297-pochemu-ne-rabotaet-vydelenie-po-kliku.html)

tania_v 19.09.2018 11:36

Почему не работает выделение по клику?
 
Здравствуйте!

Нужно выделить текстовое содержимое div по клику.
Пример кода приведен вот здесь http://jsfiddle.net/tuf8ven6/3/

У меня работает во всех браузерах.
У моего друга НЕ работает во всех браузерах (три клика нужно).

Что за явление (три клика нужно вместо одного)? Может кто встречал.

Dilettante_Pro 19.09.2018 11:53

tania_v,
Тремя кликами выделяется без всякого скрипта
<div id="select-target">This div will be selected</div>

tania_v 19.09.2018 11:56

Цитата:

Сообщение от Dilettante_Pro (Сообщение 495100)
tania_v,
Тремя кликами выделяется без всякого скрипта
<div id="select-target">This div will be selected</div>

Т.е. вообще тогда не работает тот код. Примечательно, что во всех браузерах. Наверное, надо уточнить операционку и версии (?)

рони 19.09.2018 11:57

tania_v,
у него браузер наверно Google Chrome

tania_v 19.09.2018 12:02

Нет, у него разные браузеры.

tania_v 19.09.2018 12:03

У меня Хром, Опера, Мозилла - везде работает. Правда, я на старых версиях сижу, winxp и браузеры соответствующие; но разве в новом может быть хуже, чем в старом?

tania_v 19.09.2018 12:07

А вот код ниже работает как у меня, так и у него

https://www.google.com/url?q=https%3...kpTwacZExCN Q

рони 19.09.2018 12:09

Выделение по одному клику
 
Цитата:

Сообщение от tania_v
Правда, я на старых версиях

https://www.chromestatus.com/features/6680566019653632
вырезали с Chrome 58
вот такой танец с бубнами предлагают
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">


</head>

<body>
<div id="select-target">This div will be selected</div>
<script>
document.getElementById('select-target').addEventListener('click', function() {
var selection = window.getSelection(),
range = document.createRange();
range.selectNodeContents(this);
selection.removeAllRanges();
selection.addRange(range);
});
  </script>

</body>
</html>

Dilettante_Pro 19.09.2018 12:10

У меня в хроме и ИЕ11 работает такой
<div id="select-target">This div will be selected</div>
<script>  
document.getElementById('select-target').addEventListener('click', function() {
    var r = document.createRange();
    r.selectNode(this);
    var sel = document.getSelection();
    sel.removeAllRanges();
    sel.addRange(r);
}); 
 
</script>

а вот такой не работает
<div id="select-target">This div will be selected</div>
<script>  
document.getElementById('select-target').addEventListener('click', function() {
    var r = document.createRange();
    r.selectNode(this);
    var sel = document.getSelection().removeAllRanges().addRange(r);
}); 
 
</script>

tania_v 19.09.2018 12:20

Спасибо!

В первом коде выше 2 отличия от моего. Первое состоит в selectNodeContents вместо selectNode у меня, с утра я туплю - объясните мне разницу

selectNode() method sets the Range to contain the Node and its contents.
selectNodeContents() sets the Range to contain the contents of a Node


Часовой пояс GMT +3, время: 17:27.