问题描述
经过2天的研究，我问这个问题。我已经阅读了stackoverflow和google中的所有相关问题和答案（包括问题，这是非常类似但没有答案）仍然无法找到解决方案。希望有人能够提供帮助。
I'm asking this question after 2 days of research. I've read all the related questions and answers in stackoverflow and google (including this question, which is very similar but without an answer) and still couldn't find a solution. Hopefully someone here will be able to help.
我有一个UIWebView，其中加载了一些文字。我想以编程方式选择部分文本，就像用户长按它一样。
I have a UIWebView with some text loaded into it. I want to select part of the text programmatically, as if the user long-pressed on it.
我尝试执行此javascript代码作为对点击的响应：
I've tried executing this javascript code as a response to a click:
function selectEl(x,y)
{
document.designMode = "on";
var el = document.elementFromPoint(x, y);
var range = document.createRange();
range.selectNodeContents(el);
var sel = document.getSelection();
sel.removeAllRanges();
sel.addRange(range);
document.designMode = "off";
}
我已尝试使用和不将designMode更改为关闭功能结束。
我知道这段代码选择了正确的元素，因为如果我执行这个命令
I've tried it with and without changing designMode to "off" at the end of the function.I know this code "selects" the correct element, because if I perform this command
document.execCommand("BackColor", false, "#ffffcc");
它实际上突出显示我点击的元素，但它不会导致选择文本。关于如何实现这一点的任何想法？
it actually highlights the element I clicked on, but it doesn't cause a selection of the text. Any ideas on how to achieve this?
推荐答案
这似乎是Mobile Safari中的一个错误。当我在 touchstart 中将 contentEditable 切换为true并在 touchend 它有效。如果我删除这些行并刷新它仍然工作。如果我关闭Mobile Safari，清除缓存，然后重新打开文档并删除它会再次停止工作。
This seems to be a bug in Mobile Safari. When I toggle contentEditable to true in touchstart and set it to false in touchend it works. If I remove those lines and refresh it still works. If I close Mobile Safari, clear the cache, and then re-open the document with the lines removed it stops working again.
我已经更新了以下代码工作版（虽然为了简单起见我删除了长按）。
I've updated the code below with a working version (although I removed the long-press for simplicity).
<!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>
这篇关于以编程方式在UIWebView中选择文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！