2010-01-08 4 views
3

Я хотел бы абсолютное положение div на начальном или конечном углу текста, так как пользователь тащит их мышью. К сожалению, Range предоставляет только положение индекса, а не координаты x/y. Я думаю, что может быть способ сделать это с помощью range.insertNode, но только для одной стороны. (Это может также помочь кому-то разместить поле автозаполнения под доступным контентом.)javascript выбор/диапазон координат

Как получить координаты x/y для текста или текстового курсора?

+4

http://stackoverflow.com/questions/1589721/how-can-i-position-an-element-next-to-user-text-selection –

+0

Tatu, пожалуйста, напишите, что в качестве ответа, так что я может принять его. –

ответ

6

Работы в хромированной/WebKit, позиционирование DIV после последнего выбранного письма. Как правило.

<html><head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script> 
var $div; 
var last; 
function find() { 
    var selection = window.getSelection(); 
    var text = selection.toString(); 
    if (last==text) return; else last=text; // prevent needless computations if no changes to selection 
    if (selection.rangeCount==0) return; 

    var range = selection.getRangeAt(0); 
    var $span= $("<span/>"); 

    newRange = document.createRange(); 
    newRange.setStart(selection.focusNode, range.endOffset); 
    newRange.insertNode($span[0]); // using 'range' here instead of newRange unselects or causes flicker on chrome/webkit 

    var x = $span.offset().left; 
    var y = $span.offset().top; 
    $div.text(x+" "+y); 
    $div.css({left:x,top:y+($div.height())}); 
    $span.remove(); 
} 
$(window).load(function() { 
    $("body").keydown(function(e) { 
     //find(); 
     setTimeout(find,0); 
    }); 
    $("body").mousemove(function(e) { 
     //find(); 
     setTimeout(find,0); 
    }); 
    $div=$("<div style='border:1px solid red;background:white; position:absolute;'>").appendTo($("body")); 
}); 
</script> 
</head> 
<body><p>the quick brown fox</p><ul><li>jumps <i>over</i></li></ul><p>the lazy dog</p></body> 
</html> 
0

Вам нужно будет получить положение мыши из события перемещения мыши. Затем вы можете получить позицию элемента ввода текста и выполнить математику (сделать положение мыши относительно).

EDIT:

Here is a page где вы можете получить JavaScript код, который получит позицию курсора в пикселях.

Если вы хотите использовать JQuery, вы можете использовать this

+0

Это неверно, так как вы можете перемещать текстовый курсор с помощью стрелок клавиатуры (и изменять выбор, если вы держите shift). –

+0

Вы имеете в виду, что вы хотите переместить коробку на основе выбора? изменяют ли они выбор мышью или клавишами? –

+0

Я имею в виду, что вы получите очень неправильные позиции x/y, потому что положение курсора мыши не имеет ничего общего с положением выбора текста. Вопрос ясен, на что я ищу. Выберите слова «Вы имеете в виду, а затем, что вы» с помощью мыши. Удерживайте нажатой клавишу. Теперь нажмите правую клавишу со стрелкой. Выбор изменился, но вы не знаете. Теперь выберите | этот текст | и перетащите указатель мыши в крайнее левое положение и перемещайте его вверх и вниз. Посмотрите, как изменяется выбор? –

Смежные вопросы