16

2日間の調査の後、この質問をしています。stackoverflow と google で関連するすべての質問と回答を読みました (非常に似ていますが回答がないこの質問を含む) が、解決策が見つかりませんでした。うまくいけば、ここの誰かが助けてくれるでしょう。

テキストが読み込まれた UIWebView があります。ユーザーが長押ししたかのように、テキストの一部をプログラムで選択したい。

クリックへの応答として、この JavaScript コードを実行しようとしました。

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 を「オフ」に変更して、または変更せずに試してみました。このコマンドを実行すると、このコードが正しい要素を「選択」することがわかります

document.execCommand("BackColor", false, "#ffffcc");

クリックした要素が実際に強調表示されますが、テキストが選択されるわけではありません。これを達成する方法についてのアイデアはありますか？

4

3 に答える 3

2

これは Mobile Safari のバグのようです。contentEditabletrueに切り替えてtouchstartfalse に設定すると、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>
于 2012-11-28T21:58:21.260 に答える
0

ちょっと考えてみてください: CSS で次のようなものを使用していないことを確認してください。

* {
  -webkit-touch-callout: none;
   -webkit-user-select: none;
   user-select: none;
}

これにより、テキストを選択できなくなります。

于 2012-11-30T10:00:21.303 に答える
-3

私はこれに出くわしました：

hitElem.style.backgroundColor = "highlight";
hitElem.style.color = "highlighttext";

または、 このサイトはいくつかの恐ろしいスクリプトを書いていますが、それはあなたを助けるかもしれません:)それは範囲で動作します.

于 2012-11-30T14:22:53.853 に答える