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

发布于 2024-12-29 01:47:39 字数 201 浏览 3 评论 0原文

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

其格式为 X: 200 Y: 100。这样我就可以定位浮动 div。这需要在 javascript 中动态完成。

谢谢大家

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

满地尘埃落定 2025-01-05 01:47:39

这个“原始代码”至少可以在 IE 中运行。

使用该代码，您可以将 </code> 放在页面中您想要的任何位置，<code><DIV id="db"></code> 将跟随它。即使页面的滚动位置如何。您可以通过更改 <code>d.style...6</code> 语句中的文字数字来修复 <code><DIV></code> 的位置。

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

的定位不太精确，但在 </code> 中使用固定宽度字体时效果会更好。

This "raw code" works at least in IE.

Using the code you can put your <TEXTAREA> where ever you want in page, and the <DIV id="db"> will follow it. Even despite of the scrolling position of the page. You can fix the position of <DIV> by changing the literal numbers at 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>

Positioning of the <DIV> is not quite exact, but gets better when using fixed-width font in <TEXTAREA>.

回复收藏 0 原文

夜无邪 2025-01-05 01:47:39

这是来自输入类型中插入符位置（以像素为单位）的简单组合文本（不是文本区域）、插入符位置textarea，从头开始的字符和document.getElementById vs jQuery $()获取 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 = document.getElementById('someid') 而不是 var inputter = $('#someid')[0];

这是一个 < a href="http://jsfiddle.net/YbSxf/32/" rel="nofollow noreferrer">FIDDLE。

Here is a simple mix of ideas from Caret position in pixels in an input type text (not a textarea) , Caret position in textarea, in characters from the start and document.getElementById vs jQuery $() to get the caret position in jQuery for an <input> element. It works when clicking inside it, but not when moving the caret using the arrows or typing.

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

Instead of var inputter = document.getElementById('someid') we use var inputter = $('#someid')[0];

Here is a FIDDLE.

回复收藏 0 原文

~没有更多了~