contenteditable

編集可能な要素。例えば、この赤い文字は contenteditable なので編集できるはず。

contenteditable の問題点：change イベントが発火しない

input じゃない要素を入力欄にしたい時に contenteditable は便利に見える。しかし、こいつ、 change イベントが発火しないのだ。change イベントをトリガーにして何かするのには使えない。

<div id='all'>
	<div name='a' contenteditable='true' style='border:3px solid black;'>ひつつん</div>
	<div name='b' contenteditable='true' style='border:3px solid black;'>ちわわとちくわ</div>
	<div name='c' contenteditable='true' style='border:3px solid black;'>ひよよん</div>
	<input name='d' type='text' value='これは特に設定しなくても change イベントが発生する' />
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$('#all').change(function(e){alert($(e.target).attr('name'));});
</script>

とりあえず考えた解決策 change イベントを発火するようにする

次の JavaScript を埋め込むことで contenteditable に変更が発生した場合に change イベントを発火させられる。とりあえず手元の Google Chrome と FireFox では問題なく動いた。

function bindContenteditableChangeEvent(){
	var $contenteditables = $("[contenteditable='true']");
	var text = '';

	$contenteditables.on('focus', function(e){
		text = $(e.target).html();
	});

	$contenteditables.on('focusout', function(e){
		if(text !== $(e.target).html()){
			$(e.target).trigger(new $.Event('change'));
		}
	});
}

bindContenteditableChangeEvent();