[解決済み] contenteditable、テキスト末尾にキャレットを設定 (クロスブラウザ)
2022-08-28 04:42:45
質問
での出力 クローム :
<div id="content" contenteditable="true" style="border:1px solid #000;width:500px;height:40px;">
hey
<div>what's up?</div>
<div>
<button id="insert_caret"></button>
私が信じているのは FF ではこのように表示されます。
hey
<br />
what's up?
であり IE :
hey
<p>what's up?</p>
残念ながら、すべてのブラウザで
<br />
を挿入するようにする良い方法はありませんし、少なくとも私はオンラインで何かを見つけることができませんでした。
とにかく、私が今やろうとしていることは、私が ボタン を押したときに、キャレットがテキストの最後に設定されるようにしたいので、次のように見えるはずです。
hey
what's up?|
で動作するようにするためには、どのような方法でもかまいません。 すべてのブラウザ ?
の例です。
$(document).ready(function()
{
$('#insert_caret').click(function()
{
var ele = $('#content');
var length = ele.html().length;
ele.focus();
//set caret -> end pos
}
}
どのように解決するのですか?
以下の関数で、主要なブラウザで実行されます。
function placeCaretAtEnd(el) {
el.focus();
if (typeof window.getSelection != "undefined"
&& typeof document.createRange != "undefined") {
var range = document.createRange();
range.selectNodeContents(el);
range.collapse(false);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
} else if (typeof document.body.createTextRange != "undefined") {
var textRange = document.body.createTextRange();
textRange.moveToElementText(el);
textRange.collapse(false);
textRange.select();
}
}
placeCaretAtEnd( document.querySelector('p') );
p{ padding:.5em; border:1px solid black; }
<p contentEditable>foo bar </p>
キャレットを開始位置に置くことはほとんど同じです。
collapse()
. 以下は、キャレットを開始と終了に配置する関数を作成する例です。
function createCaretPlacer(atStart) {
return function(el) {
el.focus();
if (typeof window.getSelection != "undefined"
&& typeof document.createRange != "undefined") {
var range = document.createRange();
range.selectNodeContents(el);
range.collapse(atStart);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
} else if (typeof document.body.createTextRange != "undefined") {
var textRange = document.body.createTextRange();
textRange.moveToElementText(el);
textRange.collapse(atStart);
textRange.select();
}
};
}
var placeCaretAtStart = createCaretPlacer(true);
var placeCaretAtEnd = createCaretPlacer(false);
関連
-
[解決済み] 画面サイズ、現在のウェブページ、ブラウザウィンドウのサイズを取得する
-
[解決済み] How can I set the default value for an HTML <select> element?
-
[解決済み] ボディの高さをブラウザの高さの100%にする
-
[解決済み] ブラウザのビューポート寸法を取得する方法を教えてください。
-
[解決済み】contenteditable要素(div)にキャレット(カーソル)の位置を設定する方法は?)
-
[解決済み] contentEditableキャレット位置の取得
-
[解決済み] Set cursor position on contentEditable <div>
-
[解決済み] Angularjs - 現在の日付を表示する
-
[解決済み] Chrome拡張機能:popup.htmlを強制終了させる
-
[解決済み] これは純関数ですか?
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] Prevent contenteditable adding <div> on ENTER - Chrome
-
[解決済み] contentEditableキャレット位置の取得
-
[解決済み] Set cursor position on contentEditable <div>
-
[解決済み] JavaScriptで次の要素/前の要素を取得しますか?
-
[解決済み] 兄弟ノードを選択する方法はありますか?
-
[解決済み] Promise : then vs then + catch [重複].
-
[解決済み] JavaScriptで長い配列を小さい配列に分割する方法
-
[解決済み] Node.jsのES6クラスをrequireで作る
-
[解決済み] なぜjavascriptのES6 Promisesはresolve後も実行を継続するのですか?
-
[解決済み] JavaScriptデータフォーマット/プリティプリンタ