Код выбора текста работает в браузере настольного компьютера, не работает в мобильном устройстве ⇐ Html

[Anonymous]

У меня есть код, который отлично работает на настольных компьютерах, но не работает на мобильных устройствах. Как обеспечить идеальную работу кода на мобильных телефонах?
Вот как он работает на настольном компьютере

Код: Выделить всё

    var pageX, pageY;
document.addEventListener("mouseup", () => {
function copyfieldvalue() {
var field = document.getElementById("output");
field.focus();
field.setSelectionRange(0, field.value.length);
document.execCommand("copy");
}

let selection = document.getSelection();
let selectedText = selection.toString();
var menu = document.querySelector(".menu");
if (selectedText !== "") {
let rect = document.querySelector(".text").getBoundingClientRect();
menu.style.display = "block";
menu.style.left = pageX - Math.round(rect.left) + "px";
menu.style.top = pageY - Math.round(rect.top) - 58 + "px";

document.getElementById("output").innerHTML = selectedText;

var popup = document.getElementById("mypopup");
var copybtn = document.getElementById("copy-btn");

copybtn.addEventListener("click", () => {
copyfieldvalue();
popup.style.display = "block";
});

var span = document.getElementsByClassName("close-btn")[0];

span.addEventListener("click", () => {
popup.style.display = "none";
});

window.addEventListener("click", (event) => {
if (event.target == popup) {
popup.style.display = "none";
}
});
} else {
menu.style.display = "none";
}
});
document.addEventListener("mousedown", (e) =>  {
pageX = e.pageX;
pageY = e.pageY;
});

Код: Выделить всё

    body {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #cccccc;
}
.text {
width: 400px;
min-height: 200px;
background: #fff;
padding: 20px 50px 50px 50px;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
line-height: 1.8;
word-spacing: 8px;
}
p {
margin: 0;
}
h1 {
user-select: none;
color: green;
}
.menu {
display: none;
position: absolute;
background: #a4a4a4;
border-radius: 6px;
}
.menu i {
color: #000;
cursor: pointer;
margin: 8px;
}
#output {
position: absolute;
opacity: 0.01;
height: 0;
overflow: hidden;
}
.popup {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
}
.popup-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 50%;
display: flex;
align-items: center;
}
.close-btn {
color: #aaa;
font-size: 28px;
font-weight: bold;
margin-left: auto;
}
.close-btn:hover,
.close-btn:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
.popup-content p {
font-size: 28px;
font-weight: bold;
}

Код: Выделить всё

Custom menu on text selection




GeeksforGeeks

In today’s digital world, when there are thousands of online platforms
(maybe more than that!) available over the web, it becomes quite
difficult for students to opt for a quality, relevant and reliable
platform for themselves. Meanwhile, as Computer Science is a very vast
field hence students are required to find an appropriate platform that
can fulfill all their needs such as – Tutorials & Courses, Placement
Preparation, Interview Experiences, and various others. And with the
same concern, GeeksforGeeks comes in the picture – a one-stop
destination for all Computer Science students!!


[i][/i]
[i][/i]




Copied!!
×

Вот демо-версия, опробованная на мобильном телефоне: https://codepen.io/eabangalore/pen/xxzwxxw.

Подробнее здесь: https://stackoverflow.com/questions/742 ... -in-mobile