[解決済み] contentEditableキャレット位置の取得
2022-04-26 10:30:43
質問
クロスブラウザーに対応する方法について、たくさんの良い答えが見つかりました。
セット
のキャレット位置は
contentEditable
を使用する方法はありませんが
得る
キャレットの位置がそもそも
私がしたいのは、Div 内のキャレットの位置を知ることです。
keyup
. したがって、ユーザーがテキストを入力しているときに、任意の時点で
contentEditable
要素を使用します。
<div id="contentBox" contentEditable="true"></div>
$('#contentbox').keyup(function() {
// ... ?
});
解決方法は?
以下のコードを想定しています。
-
編集可能な範囲には常に1つのテキストノードが存在します。
<div>
で、それ以外のノードはありません。 -
編集可能な div には、CSS
white-space
プロパティに設定されているpre
ネストされた要素でコンテンツを動作させる、より一般的なアプローチが必要な場合は、この答えを試してみてください。
https://stackoverflow.com/a/4812022/96100
コード
function getCaretPosition(editableDiv) {
var caretPos = 0,
sel, range;
if (window.getSelection) {
sel = window.getSelection();
if (sel.rangeCount) {
range = sel.getRangeAt(0);
if (range.commonAncestorContainer.parentNode == editableDiv) {
caretPos = range.endOffset;
}
}
} else if (document.selection && document.selection.createRange) {
range = document.selection.createRange();
if (range.parentElement() == editableDiv) {
var tempEl = document.createElement("span");
editableDiv.insertBefore(tempEl, editableDiv.firstChild);
var tempRange = range.duplicate();
tempRange.moveToElementText(tempEl);
tempRange.setEndPoint("EndToEnd", range);
caretPos = tempRange.text.length;
}
}
return caretPos;
}
#caretposition {
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="contentbox" contenteditable="true">Click me and move cursor with keys or mouse</div>
<div id="caretposition">0</div>
<script>
var update = function() {
$('#caretposition').html(getCaretPosition(this));
};
$('#contentbox').on("mousedown mouseup keydown keyup", update);
</script>
関連
-
vue ディレクティブ v-html と v-text
-
[解決済み】React Nativeアプリをターミナルから実行するとエラーが発生する(iOS)
-
[解決済み】ExpressJS : res.redirect()が期待通りに動かない?
-
JSクリックイベント - Uncaught TypeError: プロパティ 'onclick' に null を設定できません。
-
[解決済み] JavaScriptでタイムスタンプを取得する方法は?
-
[解決済み] JavaScriptで現在のURLを取得する?
-
[解決済み] JavaScriptで現在の日付を取得するには?
-
[解決済み] JavaScriptでクエリ文字列の値を取得するにはどうすればよいですか?
-
[解決済み】htmlのテキストボックスでキーボードのキャレット位置を設定する
-
[解決済み] Set cursor position on contentEditable <div>
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
vue3レスポンシブ対応のためのsetup+ref+reactive
-
JavaScriptにおけるマクロタスクとミクロタスクの詳細
-
vueディレクティブv-bindの使用と注意点
-
[解決済み】SyntaxError: JSONの位置1に予期しないトークンoがある。
-
[解決済み】Node.js getaddrinfo ENOTFOUND
-
[解決済み】リソースの読み込みに失敗した:Bind関数でサーバーが500(Internal Server Error)のステータスで応答した【非公開
-
[解決済み】ExpressJS - throw er Unhandled errorイベント
-
[解決済み】(Google Map API) Geocodeは以下の理由で成功しませんでした。REQUEST_DENIED
-
[解決済み】 Uncaught TypeError : undefined のプロパティ 'replace' を読み取れない In Grid
-
[解決済み】htmlのテキストボックスでキーボードのキャレット位置を設定する