Ответ 1
Кажется, это ошибка в Mobile Safari. Когда я переключаю contentEditable на true в touchstart и устанавливаю его в false в touchend, он работает. Если я удалю эти строки и обновить, они все равно будут работать. Если я закрою Mobile Safari, очистите кеш, а затем снова откройте документ, удалив строки, он перестанет работать снова.
Я обновил код ниже с рабочей версией (хотя для простоты я удалил длинное нажатие).
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
(function() {
var node,
range,
offset,
clientX,
clientY;
document.addEventListener("DOMContentLoaded", function() {
document.body.addEventListener("touchstart", function(event) {
var selection = window.getSelection();
selection.removeAllRanges();
clientX = event.touches[0].clientX;
clientY = event.touches[0].clientY;
range = document.caretRangeFromPoint(clientX, clientY);
node = range.startContainer;
offset = range.startOffset;
document.body.contentEditable = "true";
event.preventDefault();
});
document.body.addEventListener("touchmove", function(event) {
var selection = window.getSelection(),
range = document.caretRangeFromPoint(event.touches[0].clientX, event.touches[0].clientY),
newRange = document.createRange();
if(clientY < event.touches[0].clientY) {
newRange.setStart(node, offset);
newRange.setEnd(range.startContainer, range.startOffset);
}
else {
newRange.setStart(range.startContainer, range.startOffset);
newRange.setEnd(node, offset);
}
selection.removeAllRanges();
selection.addRange(newRange);
event.preventDefault();
});
document.body.addEventListener("touchend", function(event) {
document.body.contentEditable = "false";
event.preventDefault();
});
});
})();
</script>
<body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempus volutpat mauris sed porta. Phasellus euismod malesuada eleifend. Donec mattis, orci quis scelerisque mattis, turpis sem pulvinar nisi, et sagittis nunc nisi sed nulla. Pellentesque pharetra consequat neque, ultrices mattis mauris auctor id. Aenean tincidunt turpis non odio gravida semper. Praesent feugiat, lorem at lacinia tristique, orci eros tincidunt leo, at adipiscing sapien felis at tellus. Phasellus ac est nec nibh posuere euismod vel vitae neque. Vestibulum mollis adipiscing urna ut tristique. Vivamus purus tortor, venenatis id aliquam nec, elementum et lacus. Praesent elementum purus eget sapien ornare laoreet. Vestibulum ac odio enim.
</body>
</head>
</html>