ページ全体との関係で、テキストエリア内のカレットのピクセル位置を正確に見つけることができるかどうかは疑問でした。たとえば、テキストボックスにThis is textと入力した場合は、スクリーンの左上からcarotまでのピクトを知りたいと思います。テキストエリア内のキャレット位置をピクセルで検索する
X：200 Y：100の形式になります。これは浮動小数点型のdivを配置できるようにするためです。これは、javascriptで動的に行う必要があります。
みんなありがとう
この「生コード」は、少なくともIEで動作します。
コードを使用すると、<TEXTAREA>をページに入れたい場所に置くことができ、<DIV id="db">がそれに従います。ページのスクロール位置にかかわらず。リテラル番号をd.style...6 -statementsに変更して、<DIV>の位置を修正できます。 <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>
ポジショニングは非常に正確ではありませんが、<TEXTAREA>に固定幅フォントを使用する場合に良くなります。
は、ここでは、このためのプラグインです：jQuery caret pluginは
このプラグインは、入力フィールド内の文字を基準にしてキャレットの位置を操作します。 OPは、キャレットのスクリーン（すなわち、x、y）位置を探している。 –
あなたは下の投票で少し重い手ではありませんか？説明してください！ –
まあ、downvoteはいくつかの理由がありましたが、個人的には取らないでください - 回答が確実に更新されたら、私はdownvoteを取り消すのが早いです。ダウンボートの理由は、A）それはリンクのみの回答であり（落胆している）（http://meta.stackexchange.com/questions/8231）、B）プラグインがOPの努力を助けるかもしれないが、それはこの目的のためにOPが後であるのではなく、入力内の特定の文字の間にキャレットを設定して見つけることが目的です。 –
ありがimplementionがある：https://github.com/beviz/jquery-caret-position-getter、それはテキストエリア（IEX、Y）にキャレット位置を取得することができます
Githubへのリンクを変更しました。 –
jQueryに依存しないチャンスですか？私たちはあなたのプラグインをjQuery 1.9。*で使って問題を抱えていました。これは '$。browser 'を取り除きました。（https://github.com/beviz/jquery-caret-position-getter/issues/5）。 –
ここのためのjQueryでキャレット位置を取得するには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 $()からのアイデアのシンプルなミックスです<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です。
約42ピクセル。 – alex
その明確化の仲間をありがとう：P – alex
あなたは[これらの質問の任意の数]（http://stackoverflow.com/search?q=caret+javascript+position+x+y）に興味があるかもしれません。 –