autocomplete - current - Obteniendo la posición del cursor en un Textarea
posicion cursor input javascript (4)
Puede obtener el cursor usando document.selection.createRange () y luego examinarlo para revelar toda la información que necesita (como posición). Vea esos ejemplos para más detalles.
Estoy tratando de implementar Autocompletar en un área de texto (similar a http://www.pengoworks.com/workshop/jquery/autocomplete.htm ).
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
una fea solución:
por ejemplo: use document.selection ...
para ff: utilice un pretexto detrás de textarea, pegue el texto antes del cursor en él, coloque un elemento html marcador 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 autocompletado, solo un cursor que sigue a div aquí (a medida que escribe dentro de textarea) (modifíquelo según 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>
Implementar un autocompletado en un área de texto no es tan fácil. Implementé un plugin de jquery que hace eso, y tuve que crear un clon del texarea para adivinar dónde se coloca el cursor dentro del área de texto. Está funcionando, pero no es perfecto.
Puede consultarlo aquí: http://www.amirharel.com/2011/03/07/implementing-autocomplete-jquery-plugin-for-textarea/
Espero que ayude.
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 ... :)