テキストエリアのキャレット位置を最初から文字単位で取得する 内のキャレット位置を決定するJavaScript の使用は、テキスト編集やフォーム検証などのさまざまなアプリケーションに役立ちます。キャレットの文字ベースの位置を取得するには、ブラウザの互換性に応じてさまざまな方法を使用できます。</p> <p>Firefox や Safari などの Mozilla ベースのブラウザでは、textarea.selectionStart に直接アクセスしてキャレットの位置を取得できます。最初からキャラクターの条件。ただし、Internet Explorer などのブラウザでは、このアプローチは機能しない可能性があります。</p> <p>ブラウザ間の互換性を確保するには、次の JavaScript 関数を実装できます。</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>function getCaret(node) { if (node.selectionStart) { return node.selectionStart; } else if (!document.selection) { return 0; } var c = "1", sel = document.selection.createRange(), dul = sel.duplicate(), len = 0; dul.moveToElementText(node); sel.text = c; len = dul.text.indexOf(c); sel.moveStart('character',-1); sel.text = ""; return len; }</pre><div class="contentsignin">ログイン後にコピー</div></div> <p>この関数は document.selection を利用します。 IE で使用できるオブジェクトを使用して、キャレットの位置を決定します。まず範囲オブジェクトを作成し、それを複製し、その範囲をテキストエリアの先頭に移動します。次に、キャレットの位置に特殊文字を追加し、後続のテキストの長さを計算します。これにより、文字ベースの位置が提供されます。</p> <p>より包括的なソリューションとして、テキストエリアでの高度なテキスト選択および操作機能を提供する jQuery FieldSelection Plugin などのプラグインがあります。</p> <p>最後に、注意することが重要です。コードには、より最適化された getCaret 関数の更新された実装を含む「編集」セクションが含まれています。関数の最新バージョンについては、更新されたコード例を必ず参照してください。</p>
