Получение позиции курсора в текстовой области - PullRequest
Новая
       59

Получение позиции курсора в текстовой области

8 голосов
/ 04 декабря 2008

Я пытаюсь реализовать автозаполнение в текстовой области (аналогично http://www.pengoworks.com/workshop/jquery/autocomplete.htm).

То, что я пытаюсь сделать, - это когда пользователь вводит определенный набор символов (скажем, вставка :), он получает заполненный AJAX div с возможными выбираемыми совпадениями.

В обычном текстовом поле это, конечно, просто, но в текстовой области мне нужно иметь возможность вывести div в нужное место на экране в зависимости от курсора.

Может ли кто-нибудь указать какое-либо направление?

Спасибо, -М

Ответы [ 4 ]

4 голосов
/ 04 декабря 2008

Вы можете получить каретку, используя document.selection.createRange (), а затем исследуя ее, чтобы показать всю необходимую вам информацию (например, позицию). См. эти примеры для получения более подробной информации.

1 голос
/ 09 марта 2011

Реализовать автозаполнение в текстовой области не так просто. Я реализовал плагин jquery, который делает это, и мне пришлось создать клон texarea, чтобы угадать, где курсор находится внутри textarea. Это работает, но не идеально.

Вы можете проверить это здесь: http://www.amirharel.com/2011/03/07/implementing-autocomplete-jquery-plugin-for-textarea/

Надеюсь, это поможет.

0 голосов
/ 06 августа 2009

мерзкое решение:

для ie: использовать document.selection ...

для ff: используйте pre за textarea, вставьте текст перед курсором в него, поместите HTML-элемент маркера после него (cursorPos) и получите позицию курсора через этот элемент маркера

Примечания: | код ужасен, извините за это | шрифт pre и textarea должен быть одинаковым | непрозрачность используется для визуализации | здесь нет автозаполнения, просто курсор, следующий за div (при вводе внутри textarea) (измените его в зависимости от ваших потребностей) 

<code><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">
автозаполнение содержимого
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) + ''; 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) { делать { curleft + = obj.offsetLeft; curtop + = obj.offsetTop; } while (obj = obj.offsetParent); } возврат [curleft, curtop]; } //myTextarea.selectionStart
0 голосов
/ 22 июня 2009 
    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];
}

Вот бы это сделать ...:)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...