ユーザーがクリックした入力要素の場所を検出する方法

Question

ユーザーがクリックした入力要素のコンテンツのどこを検出する方法はありますか？特にFirefoxで？ キャレットがどこにあるのかを知る必要がありますが、ユーザーが入力要素をクリックしたときにキャレットがどこにあるのかを知る必要があります。 私はfirefoxにバグを修正しようとしています。ユーザーがクリックして、 '.select（）'が呼び出された入力要素にキャレットを置くことはできません。キャレットはFirefoxに表示されないので、それは可能な場合は手動で行います。

ありがとうございます！

Answer 1

あなたがクリックイベントのoffsetXとoffsetYを読み取ることによって、（入力フィールドに対して）、ユーザーのクリックのピクセル位置を取得することができます。

希望キャレットの場所にそれを変換する

// get the click position: 
 
document.getElementById('test').onclick = function(e) { 
 
    console.log(e.offsetX, e.offsetY) 
 
}; 
 

 
// for testing the 'select' issue: 
 
document.getElementById('btn').onclick = function() { 
 
    document.getElementById('test').select(); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<textarea id="test">xxxxxx</textarea> 
 

 
<button id="btn">Select</button>

しかし、それはフォントサイズと入力フィールドのテキスト内容に依存するため、簡単ではありません。私が思うには、textarea-caret-positionで使用されているテクニックのようにするのが良いでしょう。ただし、テキストエリア内の可能なすべてのキャレット位置を反復して、ユーザーがクリックした場所に最も近いものを見つけてください。あなたが念頭に置いている仕事のためにほとんど確実に過剰です。

（現行バージョンのfirefox（v57）では、入力フィールドが選択されているかどうかにかかわらず、キャレットを正しく配置するのに問題はないようです）これは前のバージョン）

Answer 2

問題の根本原因を見つけたので、悪いCSSがtext-selectを入力要素に自動設定しました。それをテキスト選択：テキストに変更することで、私がSafariで使用していたフィックスもFirefoxでも使えるようになりました。