HTML contenteditable

contenteditableをtrueに設定すると、ユーザーによる要素の変更が可能となります。

キャレット（カーソル）の移動

カーソルを文末（末尾）に移動する

function setEndOfContenteditable(contentEditableElement) {
	var range, selection;
	range = document.createRange();
	range.selectNodeContents(contentEditableElement);
	range.collapse(false); // false->始点が終点の位置に移動
	selection = window.getSelection();
	selection.removeAllRanges();
	selection.addRange(range); // 可視化される
}

javascript - How to move cursor to end of contenteditable entity - Stack Overflow

動的にtrue

contenteditableを動的にtrueにした場合、一旦要素のフォーカスが外れてからでないと編集可能状態にならなかったので対策を考えてみました。

blur()を使う

el.addEventListener("click", (ev) => {
	let _el = ev.target
	_el.setAttribute("contenteditable",true)
	_el.blur()
	_el.focus()
})

trueにした後、blur()であえてフォーカスを外し、再度focusを当てています。

はまった点

tabや改行

	<div class="editor" contenteditable="true">123456789
	</div>

このようなhtmlが書かれた場合、このelementのinnerHTMLは"123456789\n\t"となります。innerTextは"123456789"ですが、textContentは"123456789\n\t"であり、わかりづらい。テキストのlengthの値が狂ってきますし。

さらに以下のように余分なスペースが入ってしまいます。

スペースが入る（画像）

こうした減少はシンタックスハイライターなどでも起こり、以下のようにtabや改行を入れなければ回避できますが・・。

<div class="editor" contenteditable="true">123456789</div>