VPF::Позиция текстового курсора - Форум программистов

CruorVult

Дата 16.12.2009, 22:48 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 868
Регистрация: 24.9.2008
Где: г.Киев, Украина

Репутация: 13
Всего: 28

Как определить позицию текстового курсора в <texarea> относительно окна ?

Samotnik

Дата 17.12.2009, 00:27 (ссылка)

(нет голосов)

Загрузка ...

Super star !

Профиль
Группа: Awaiting Authorisation
Сообщений: 7192
Регистрация: 4.11.2006
Где: Минск City

Репутация: 3
Всего: 191

жеванно - пережеванно

Код


function getCaretPos(obj)
{
  obj.focus();
  
  if(obj.selectionStart) return obj.selectionStart;//Gecko
  else if (document.selection)//IE
  {
    var sel = document.selection.createRange();
    var clone = sel.duplicate();
    sel.collapse(true);
    clone.moveToElementText(obj);
    clone.setEndPoint('EndToEnd', sel);
    return clone.text.length;
  }
  
  return 0;
}

В качестве аргумента передается объект textarea.

bars80080

Дата 17.12.2009, 01:15 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 15
Всего: 315

а заодно, идём на tigir.com и смотрим там остальные вопросы в разделе javascript

CruorVult

Дата 17.12.2009, 02:04 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 868
Регистрация: 24.9.2008
Где: г.Киев, Украина

Репутация: 13
Всего: 28

Цитата(Samotnik @ 17.12.2009, 00:27)

жеванно - пережеванно

Код


function getCaretPos(obj)
{
  obj.focus();
  
  if(obj.selectionStart) return obj.selectionStart;//Gecko
  else if (document.selection)//IE
  {
    var sel = document.selection.createRange();
    var clone = sel.duplicate();
    sel.collapse(true);
    clone.moveToElementText(obj);
    clone.setEndPoint('EndToEnd', sel);
    return clone.text.length;
  }
  
  return 0;
}

В качестве аргумента передается объект textarea.

В итоге получаем позицию курсора в объекте textarea. а мне надо позиция в пикселях относительно окна браузера. Тоесть мне надо создать всплывающий список когда кто-то вводит текст в тексарею

CruorVult

Дата 18.12.2009, 12:06 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 868
Регистрация: 24.9.2008
Где: г.Киев, Украина

Репутация: 13
Всего: 28

а говорите "жеванно - пережеванно" smile

Amphiluke

Дата 18.12.2009, 12:43 (ссылка)

(нет голосов)

Загрузка ...

☽

Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 35
Всего: 112

В IE решение достаточно просто:

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Get caret position</title>
<style type="text/css">
    #coords {
        background: #FFFFCC;
        border: 1px solid #000000;
        height: 25px;
        position: absolute;
        width: 120px;
        z-index: 10000;
    }
</style>
<script type="text/javascript">
    function showCaretPos() {
        var caretsel = document.selection.createRange();
        var coorddiv = document.getElementById("coords");
        coorddiv.firstChild.nodeValue = "X=" + caretsel.offsetLeft.toString() +
            "; Y=" + caretsel.offsetTop.toString();
        coorddiv.style.left = caretsel.offsetLeft.toString() + "px";
        coorddiv.style.top = (caretsel.offsetTop - coorddiv.offsetHeight).toString() + "px";
    }
</script>
</head>

<body>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin accumsan adipiscing magna. Sed et nulla. Curabitur massa diam, fermentum eget, vehicula sagittis, volutpat sed, lectus. Cras elementum convallis metus.</p>
    <form action="#">
        <textarea cols="75" rows="10" name="tarea" id="tarea" onkeyup="showCaretPos();"></textarea>
    </form>
    <div id="coords">&nbsp;</div>
</body>
</html>

В других браузерах что-то не припомню аналогов для атрибутов offsetLeft и offsetTop объекта TextRange в IE…

Это сообщение отредактировал(а) Amphiluke - 18.12.2009, 12:46

CruorVult

Дата 19.12.2009, 15:03 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 868
Регистрация: 24.9.2008
Где: г.Киев, Украина

Репутация: 13
Всего: 28

Amphiluke, спасибо за пример!
для IE как раз таки и не надо, ладно буду искать аналоги offsetLeft и offsetTop

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »