Найти позицию каретки в textarea в пикселях

Мне было интересно, можно ли найти точное местоположение каррета в текстовом поле в пикселях по отношению ко всей странице. Например, если я набрал This is text в свое текстовое поле, я хотел бы узнать пиксели в верхнем левом углу экрана.Найти позицию каретки в textarea в пикселях

Это будет в форме X: 200 Y: 100. Это значит, что я могу разместить плавающий div. Это необходимо сделать динамически в javascript.

Спасибо, ребята

источник

2012-01-26 JustinPGriffen

Приблизительно '42' pixies. – alex

Спасибо за разъяснение: P – alex

Возможно, вас заинтересует [любое количество этих вопросов] (http://stackoverflow.com/search?q=caret+javascript+position+x+y). –

Это «сырой код» работает по крайней мере, в IE.

Используя код, вы можете поместить свой <TEXTAREA>, где бы вы ни захотели на странице, и за ним последует <DIV id="db">. Даже несмотря на прокручиваемое положение страницы. Вы можете исправить положение <DIV>, изменив литеральные номера на d.style...6 -statements.

<body> 
<div id="db" style="position:absolute;left:-20px;top:-20px;border:1px solid red;">V</div> 
<br><br><br> 
<form id="props"> 
<textarea id="ta" style="width:200px;height:100px;" onkeyup="moveDiv();"></textarea> 
</form> 

<script> 
<!-- 
var b=document.body; 
var d=document.getElementById('db'); 
var a=document.getElementById('ta'); 

function moveDiv(){ 
    var sel=document.selection; 
    var targ=sel.createRange(); 
    d.style.top=a.offsetTop+a.clientTop-d.clientHeight-6; 
    d.style.left=targ.offsetLeft+b.scrollLeft-6; 
    return; 
} 
// --> 
</script> 
</body>

Позиционирование <DIV> не совсем точно, но становится лучше при использовании фиксированной ширины шрифта в <TEXTAREA>.

источник

2012-01-26 07:44:05 Teemu

Вот плагин для этого: jQuery caret plugin

источник

2012-01-26 02:34:26

Этот плагин работает с положением каретки относительно символов внутри поля ввода; OP ищет экран (т. е. x, y) позиции каретки. –

Разве вы не слишком тяжело сданы с голосом? Пожалуйста, объясни! –

Ну, нисходящее движение было по нескольким причинам, но, пожалуйста, не принимайте это лично - я быстро отменил нисходящее направление, если ответ будет положительно обновлен. Причинами для downvote были A) это ответ только для ссылок, [которые не рекомендуется] (http://meta.exackchange.com/questions/8231) и B), в то время как плагин может помочь с усилиями OP, это Цель состоит в том, чтобы установить и найти каретку между конкретными символами внутри входа, что не является тем, что ОП в этом случае. –

Существует РЕАЛИЗАЦИЯ: https://github.com/beviz/jquery-caret-position-getter, он может становится положение курсора в текстовое поле (IEX, у)

источник

2012-02-20 14:46:33

Я изменил ссылку на Github. –

Любой шанс не зависеть от jQuery? У нас [проблемы с вашим плагином с jQuery 1.9. *, Который избавляется от '$ .browser'] (https://github.com/beviz/jquery-caret-position-getter/issues/5). –

Вот простая смесь идей из Caret position in pixels in an input type text (not a textarea), Caret position in textarea, in characters from the start и document.getElementById vs jQuery $() получить позицию курсора в JQuery для элемент <input>. Он работает при нажатии внутри него, но не при перемещении каретки с использованием стрелок или ввода.

<input id="someid"> 
<span id="faux" style="display:none"></span><br/> 

<script> 
var inputter = $('#someid')[0]; 
var faux = $('#faux'); 

function getCaret(el) { 
    if (el.selectionStart) { 
     return el.selectionStart; 
    } else if (document.selection) { 
     el.focus(); 

     var r = document.selection.createRange(); 
     if (r == null) { 
      return 0; 
     } 

     var re = el.createTextRange(), 
      rc = re.duplicate(); 
     re.moveToBookmark(r.getBookmark()); 
     rc.setEndPoint('EndToStart', re); 

     return rc.text.length; 
    } 
    return 0; 
} 

$("#someid").click(function(event) { 
    caretpos = getCaret(inputter); 
    calcfaux = faux.text($(this).val().substring(0, caretpos)); 
    fauxpos = calcfaux.outerWidth(); 
    $("#getpx").text(fauxpos + " px"); 
}); 

</script>

Вместо var inputter = document.getElementById('someid') мы используем var inputter = $('#someid')[0];

Вот FIDDLE.

источник

2013-02-14 13:33:41

Найти позицию каретки в textarea в пикселях

ответ

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