자바 스크립트를 사용하여 텍스트 영역에 카레트 위치 x y를 찾으십시오.

Question

무엇을하려고하는 것은 - 이름이 아닐지도 모릅니다 - 예측 도움말 입력 도구가 텍스트 영역에 있습니다. 그것은 jquery 자동 완성을 사용합니다. 사용자가 '[[g'를 텍스트 영역 (id = test) 안에 입력하면, 자동 완성을 가진 입력이 열리고 (id = example), 'data'에서 검색하게됩니다. 사용자가 원하는 데이터를 찾으면 Shif + Enter를 눌러 텍스트 영역에 데이터를 삽입하고 ']]'로 닫아야합니다.

입력이 근처에 표시되도록하려면 어떻게 카레의 위치를 ​​찾을 수 있습니까?

나는 carret의 색인을 찾고 싶지 않지만 xy 절대 위치와 같은 것을 찾으려고한다.

나에게 무엇을 제안합니까? 위의

코드 :

<textarea onkeydown="predicao(this);" cols="40" rows="10" id="test" onfocus="this.focus()"></textarea> 
<input id="example" style="display: none;" onkeyup="insert(this, event);"/> 

<script language="Javascript"> 
<!-- 

function predicao(objeto){ 
    comprimento = objeto.value.length; 
    var antipenultimo = comprimento - 4; 
    var input = objeto.value.substring(antipenultimo,comprimento); 
    var output = ""; 
    for(i=0; i<input.length; ++i){ 
     if(output != "") output += ", "; 
     output += input.charCodeAt(i); 
    } 
    if (output == "91, 91, 103, 32"){ 

     var preditor = document.getElementById('example'); 
     preditor.value = ''; 
     preditor.style.display = 'block'; 
     preditor.focus(); 
     preditor.select(); 
    } 
} 
function insert(objeto, evt){ 
    var e = evt || event; 
    var code = e.keyCode || e.which; 
    if(e.shiftKey && code == '13') { 
     var texto = document.getElementById('test').value; 
     texto += objeto.value+']]'; 
     document.getElementById('test').focus(); 
     document.getElementById('test').value = texto; 
     objeto.style.display = 'none'; 
    } 
} 

$(document).ready(function(){ 
    var data = "Afrikaans Català Deutsch English Esperanto Suomi Français Galego Hrvatski Magyar Bahasa Indonesia Italiano Basa Jawa".split(" "); 
$("#example").autocomplete(data);}); 
</script> 

Answer 1

뭔가 같은 :

var pos = $('textarea').caret(); // using caret plugin... 
var lines = $('textarea').val().slice(0, pos).replace(/\t/g, ' ').split('\n'); 
var y = lines.length; 
var x = lines[y-1].length; 

이 수정 폭 글꼴을 합리적으로 잘 작동합니다.

Answer 2

당신은 JS를 통해 그것을 할 찾고 있다면 :

function doGetCaretPosition (ctrl) { 
    var CaretPos = 0; // IE Support 
    if (document.selection) { 
    ctrl.focus(); 
     var Sel = document.selection.createRange(); 
     Sel.moveStart ('character', -ctrl.value.length); 
     CaretPos = Sel.text.length; 
    } 
    // Firefox support 
    else if (ctrl.selectionStart || ctrl.selectionStart == '0') 
     CaretPos = ctrl.selectionStart; 
    return (CaretPos); 
} 

씨 : http://blog.vishalon.net/index.php/javascript-getting-and-setting-caret-position-in-textarea/
데모 :