查找文本区域中插入符号的位置(以像素为单位）

Find caret position in textarea in pixels

本文关键字：像素 为单位 位置 区域 文本 插入 符号 查找      更新时间：2023-09-26

我想知道是否可以找到文本区域内插入符号相对于整个页面的确切位置（以像素为单位）。例如，如果我在文本框中键入了This is text，我想知道从屏幕左上角到插入符号的像素。

它的形式是X:200 Y:100。这样我就可以定位一个浮动div。这需要在javascript中动态完成。

谢谢各位

这个"原始代码"至少在IE中有效。

使用该代码，您可以将<TEXTAREA>放在页面中任何您想要的位置，<DIV id="db">也会跟随它。即使页面的滚动位置不同。您可以通过更改d.style...6-语句中的文字数字来固定<DIV>的位置。

<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>中使用固定宽度字体会更好。

这里有一个简单的想法组合，来自输入类型文本（而不是文本区域）中以像素为单位的插入符号位置、文本区域中以字符为单位的输入符号位置和document.getElementById vs jQuery$（），以获取<input>元素在jQuery中的插入符号。它在内部单击时有效，但在使用箭头移动插入符号或键入时无效。

<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 = $('#someid')[0]; 而不是var inputter = document.getElementById('someid')

这是一个FIDDLE。

相关文章：