텍스트 블록에서 문자 좌표를 가져 오는 방법은 무엇입니까?

모노 스페이스 텍스트 블록에 마우스 커서 아래에있는 문자의 좌표 (행 & colX, pageX & pageY가 아닌)를 가져 오는 Javascript 스 니펫이나 JQuery 플러그인이 있습니까?텍스트 블록에서 문자 좌표를 가져 오는 방법은 무엇입니까?

출처

2009-08-10 btw0

내가 해킹 한 코드가 있습니다. <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>

출처

2009-08-10 20:23:47 Rob

-1 – markus

이 솔루션은 Firefox 3.5의 큰 텍스트 블록에 대해서는 매우 느립니다. – btw0

텍스트 블록에서 문자 좌표를 가져 오는 방법은 무엇입니까?

답변

관련 문제