くわこのpermission denied.

WEBエンジニアの僕がぶつかった技術的な問題や発見

【HTML5】contenteditableでできること、できないこと【jQuery】

f:id:mask0702:20131124004650j:plain

html5から正式にcontenteditableが使われるようになりましたね。

contenteditableとはtextareaではないwebページ上でも文字の編集などができる機能です。

HTML5/グローバル属性/contenteditable属性 要素内容が編集可能かどうかを指定する - TAG index Webサイト

このcontenteditableが意外とくせ者だったのでメモ。

本来、僕がやりたかったのはcontenteditable内でキャレットの位置を取得して文字数をカウントしたり、その他jQueryでできそうなことをいろいろ工夫するつもりだったのですが、そもそもfocus()などのイベント関数やほぼ全てのjQueryの関数が効かないことが分かりました。

逆に何が効くのかというと、execCommand()という関数で文字を大きくしたり、下線を引いたり、エディタっぽいことはできるよおうになっています。

参考:Mozilla におけるリッチテキスト編集 | MDN

 

注意しなければならないのは、ブラウザ毎にかなり挙動が違うということです。

contenteditable (直接編集) の傾向と対策 【 ありのごとくあつまりて 】

特にIEでの挙動は明らかにおかしいので、まだまだ実際にwebサービスで使えるようなレベルではないと思います。