Question

在monospace文本块中，是否有一个javascript片段或JQuery插件，它可以获取鼠标光标下角色的坐标（文本的行和列，而不是pageX＆amp; pageY）并突出显示字符？

Answer 1

以下是我一起攻击的一些代码。它用<pre>包裹<span>中的每个角色。 <span>使用onmouseover和onmouseout来突出显示字符，并将行和列放在<div>下面的<pre>。

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

    <style type="text/css">
        #coordText {
            font-family: "Courier New", Courier, monospace;
            overflow: auto;
        }
    </style>

    <script type="text/javascript" >
        function showinfo(row, col) {
            $('div#info').html("row " + row + ", col " + col);
            $('#r' + row + 'c' + col).css('background-color', '#ddd');
        }
        function hideinfo(row, col) {
            $('div#info').html('');
            $('#r' + row + 'c' + col).css('background-color', '#fff');
        }
        $(document).ready(function() {
        var text = $("#coordText").text();
        var html = '';
        var col = 1;
        var row = 1;
        for (var i=0; i<text.length; i++) {
            if (text.charAt(i) == '\n' || text.charAt(i) == '\r') {
                if (i > 0 && text.charAt(i-1) == '\r')
                    continue;
                row++;
                col = 1;
                html += '<br />';
            } else {
                html += '<span id="r' + row + 'c' + col;
                html += '" onmouseover="showinfo(' + row + ', ' + col;
                html += ')" onmouseout="hideinfo(' + row + ', ' + col;
                html += ')">' + text.charAt(i) + '</span>';
                col++;
            }
        }
        $("#coordText").html(html);
        });
    </script>
</head>
<body>
<pre id="coordText">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque imperdiet velit ut sem pulvinar pulvinar.
Sed sed molestie justo. Mauris blandit est sit amet lacus cursus et porta lorem gravida.
Nunc eget leo id diam faucibus lobortis non volutpat est. Fusce facilisis consectetur congue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sodales lectus et ligula luctus sit amet ornare sem dignissim.
Nunc fringilla tempus leo in accumsan.
Cras facilisis quam non arcu mollis pretium.
In hac habitasse platea dictumst. Maecenas vitae turpis ante.
Cras lorem mauris, iaculis nec sollicitudin id, dapibus in nunc.</pre>

<div id="info"></div>

</body>
</html>

如何在文本块中获取字符坐标？

1 个答案: