以编程方式在 UIWebView 中选择文本 [英] Programmatically select text in UIWebView
问题描述
经过 2 天的研究，我提出了这个问题.我已经阅读了 stackoverflow 和 google 中的所有相关问题和答案(包括 this 问题，非常类似但没有答案)并且仍然找不到解决方案.希望这里有人能提供帮助.
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 更改为off"，也可以不更改.我知道这段代码选择"了正确的元素，因为如果我执行这个命令
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 中将其设置为 false 时，它可以工作.如果我删除这些行并刷新它仍然有效.如果我关闭 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 中选择文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
