1. Inicio
  2. Pregunta y respuesta
  3. Obteniendo la posición del cursor en un Textarea

Obteniendo la posición del cursor en un Textarea

2008-12-04 13 views
8

Estoy tratando de implementar Autocompletar en un área de texto (similar a http://www.pengoworks.com/workshop/jquery/autocomplete.htm).Obteniendo la posición del cursor en un Textarea

Lo que trato de hacer es cuando un usuario ingresa un conjunto específico de caracteres (por ejemplo, insertar :) obtendrán un div lleno de AJAX con posibles coincidencias seleccionables.

En un cuadro de texto normal, esto es simple, pero en un área de texto necesito poder mostrar el div en la ubicación correcta en la pantalla en función del cursor.

¿Alguien puede proporcionar alguna dirección?

Gracias, -M

Fuente

2008-12-04 Anonymous

Respuesta

4

Usted puede obtener el cursor utilizando document.selection.createRange() y, a continuación, examinar para revelar toda la información que necesita (como la posición). Vea thoseexamples para más detalles.

Fuente

2008-12-04 16:45:39

0 
function getCursor(nBox){ 
    var cursorPos = 0; 
    if (document.selection){ 
     nBox.focus(); 
     var tmpRange = document.selection.createRange(); 
     tmpRange.moveStart('character',-nBox.value.length); 
     cursorPos = tmpRange.text.length; 
    } 
    else{ 
     if (nBox.selectionStart || nBox.selectionStart == '0'){ 
      cursorPos = nBox.selectionStart; 
     } 
    } 

    return cursorPos; 
} 

function detectLine(nBox,lines){ 
    var cursorPos = getCursor(nBox); 
    var z = 0; //Sum of characters in lines 
    var lineNumber = 1; 
    for (var i=1; i<=lines.length; i++){ 
     z = sumLines(i)+i; // +i because cursorPos is taking in account endcharacters of each line. 
     if (z >= cursorPos){ 
      lineNumber = i; 
      break; 
     } 
    } 

    return lineNumber; 

    function sumLines(arrayLevel){ 
     sumLine = 0; 
     for (var k=0; k<arrayLevel; k++){ 
      sumLine += lines[k].length; 
     } 
     return sumLine; 
    } 
} 



function detectWord(lineString, area, currentLine, linijeKoda){ 
    function sumWords(arrayLevel){ 
     var sumLine = 0; 
     for (var k=0; k<arrayLevel; k++){ 
      sumLine += words[k].length; 
     }  
     return sumLine; 
    } 


    var cursorPos = getCursor(area); 
    var sumOfPrevChars =0; 
    for (var i=1; i<currentLine; i++){ 
     sumOfPrevChars += linijeKoda[i].length; 
    } 

    var cursorLinePos = cursorPos - sumOfPrevChars; 

    var words = lineString.split(" "); 
    var word; 
    var y = 0; 


    for(var i=1; i<=words.length; i++){ 
     y = sumWords(i) + i; 
     if(y >= cursorLinePos){ 
      word = i; 
      break; 
     } 
    } 

    return word; 
} 

var area = document.getElementById("area"); 
var linijeKoda = area.value.split("\n"); 
var currentLine = detectLine(area,linijeKoda); 
var lineString = linijeKoda[currentLine-1]; 
var activeWord = detectWord(lineString, area, currentLine, linijeKoda); 
var words = lineString.split(" "); 
if(words.length > 1){ 
    var possibleString = words[activeWord-1]; 
} 
else{ 
    var possibleString = words[0]; 
}

Eso lo haría ... :)

Fuente

2009-06-22 15:59:49 Popara

0

una solución fea:

por ejemplo: el uso document.selection ...

para FF: utilizar un pre detrás de área de texto , pegue el texto antes del cursor en él, coloque un marcador elemento html después de él (cursorPos) y obtenga la posición del cursor a través de ese elemento marcador

Notas: | el código es feo, lo siento por eso | la fuente pre y textarea debe ser la misma | la opacidad se utiliza para la visualización | no hay autocompletar, sólo un div cursor siguiendo aquí (como se escribe dentro de área de texto) (modificarla basa en su necesidad)

<html> 
<style> 
pre.studentCodeColor{ 
    position:absolute; 
    margin:0; 
    padding:0; 
    border:1px solid blue; 
    z-index:2; 
} 
textarea.studentCode{ 
    position:relative; 
    margin:0; 
    padding:0; 
    border:1px solid silver;  
    z-index:3; 
    overflow:visible; 
    opacity:0.5; 
    filter:alpha(opacity=50); 
} 
</style> 

hello world<br/> 
how are you<br/> 
<pre class="studentCodeColor" id="preBehindMyTextarea"> 
</pre> 
<textarea id="myTextarea" class="studentCode" cols="100" rows="30" onkeyup="document.selection?ieTaKeyUp():taKeyUp();"> 
</textarea> 

<div 
    style="width:100px;height:60px;position:absolute;border:1px solid red;background-color:yellow" 
    id="autoCompleteSelector"> 
autocomplete contents 
</div> 

<script> 
var myTextarea = document.getElementById('myTextarea'); 
var preBehindMyTextarea = document.getElementById('preBehindMyTextarea'); 
var autoCompleteSelector = document.getElementById('autoCompleteSelector'); 

function ieTaKeyUp(){ 
    var r = document.selection.createRange(); 
    autoCompleteSelector.style.top = r.offsetTop; 
    autoCompleteSelector.style.left = r.offsetLeft; 
} 
function taKeyUp(){ 
    taSelectionStart = myTextarea.selectionStart; 
    preBehindMyTextarea.innerHTML = myTextarea.value.substr(0,taSelectionStart)+'<span id="cursorPos">'; 
    cp = document.getElementById('cursorPos'); 
    leftTop = findPos(cp); 

    autoCompleteSelector.style.top = leftTop[1]; 
    autoCompleteSelector.style.left = leftTop[0]; 
} 
function findPos(obj) { 
    var curleft = curtop = 0; 
    if (obj.offsetParent) { 
     do { 
      curleft += obj.offsetLeft; 
      curtop += obj.offsetTop; 
     } while (obj = obj.offsetParent); 
    } 
    return [curleft,curtop]; 
} 
//myTextarea.selectionStart 
</script> 
</html>

Fuente

2009-08-06 11:26:01

Cuestiones relacionadas

 Cuestiones relacionadas