12

ページ全体に対して、テキストエリア内のキャレットの正確な位置をピクセル単位で見つけることができるかどうか疑問に思っていました。たとえばThis is text、テキスト ボックスに入力した場合、画面の左上からキャレットまでのピクセル数を知りたいとします。

X: 200 Y: 100 の形式になります。これは、フローティング div を配置できるようにするためです。これはjavascriptで動的に行う必要があります。

みんなありがとう

4

2 に答える 2

3

この「生のコード」は、少なくとも IE では機能します。

コードを使用する<TEXTAREA>と、ページ内のどこにでも配置でき、<DIV id="db">それに従います。ページのスクロール位置にもかかわらず。-statements<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>ます。

于 2012-01-26T07:44:05.503 に答える
1

これは、入力タイプ text (テキストエリアではない) のピクセル単位のキャレット位置、テキストエリアのキャレット位置、先頭からの文字、およびdocument.getElementById 対 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-14T13:33:41.923 に答える