Найти позицию каретки в textarea в пикселях [дубликат]

этот вопрос уже есть ответ здесь:

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

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

Спасибо, ребята!--2-->

10
cursor html javascript position textarea

4 ответов

этот "сырой код" работает, по крайней мере в IE.

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

<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>.

2

есть мастер-класс: https://github.com/beviz/jquery-caret-position-getter, он может получает позицию курсора в textarea(i.e.x, y)

1

вот плагин для этого:в jQuery плагин для вставки

0

вот простое сочетание идей из положение курсора в пикселях в тексте типа входного сигнала (не textarea) , позиция курсора в textarea, в символах с самого начала и документ.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];

здесь это скрипка.

0