2

我表单中的文本区域 id="Fulltext" 由数据库提供，其中包含一本书的许多章节。当用户单击文本区域上方的链接时
<a href="samePage.php?chap=Chapter 5" id="Chapter 5">Chapter 5</a>，我希望光标在文本区域内移动并将其自身定位在文本“第 5 章”的前面。这可能吗？

4

2 回答 2

3

演示：http: //jsfiddle.net/deg6j/

HTML

<html>
<head>
    <script type="text/javascript">
        function selectText(text)
        {
            var textArea = $('#Fulltext');
            var index = textArea.text().search(text);
            textArea.caretTo(index);      
        }
    </script>
</head>
<body>
<textarea id='Fulltext' rows=10>
    Chapter 1
    This is a lot of text...

    Chapter 2
    More more more

    Chapter 3
    More dsa less
</textarea>
    <a href="#" onclick="selectText('Chapter 2')">Chapter 2</a>
</body>
</html>

Javascript

new function($) {
  // Behind the scenes method deals with browser
    // idiosyncrasies and such
    $.caretTo = function (el, index) {
        if (el.createTextRange) { 
            var range = el.createTextRange(); 
            range.move("character", index); 
            range.select(); 
        } else if (el.selectionStart != null) { 
            el.focus(); 
            el.setSelectionRange(index, index); 
        }
    };

    // The following methods are queued under fx for more
    // flexibility when combining with $.fn.delay() and
    // jQuery effects.

    // Set caret to a particular index
    $.fn.caretTo = function (index, offset) {
        return this.queue(function (next) {
            if (isNaN(index)) {
                var i = $(this).val().indexOf(index);

                if (offset === true) {
                    i += index.length;
                } else if (offset) {
                    i += offset;
                }

                $.caretTo(this, i);
            } else {
                $.caretTo(this, index);
            }

            next();
        });
    };
}(jQuery);
于 2013-01-23T19:34:33.640 回答
1

我猜你可以。

假设您可以通过文本识别章节开始的位置，您可以使用jQuery caret plugin做到这一点。

检查这个和这个问题的答案。

另外，您可能希望在章节锚点中绑定一个 javascript 函数。

于 2013-01-23T19:34:58.040 回答