【HTML5】contenteditableでできること、できないこと【jQuery】
html5から正式にcontenteditableが使われるようになりましたね。
contenteditableとはtextareaではないwebページ上でも文字の編集などができる機能です。
HTML5/グローバル属性/contenteditable属性 要素内容が編集可能かどうかを指定する - TAG index Webサイト
このcontenteditableが意外とくせ者だったのでメモ。
本来、僕がやりたかったのはcontenteditable内でキャレットの位置を取得して文字数をカウントしたり、その他jQueryでできそうなことをいろいろ工夫するつもりだったのですが、そもそもfocus()などのイベント関数やほぼ全てのjQueryの関数が効かないことが分かりました。
逆に何が効くのかというと、execCommand()という関数で文字を大きくしたり、下線を引いたり、エディタっぽいことはできるよおうになっています。
参考:Mozilla におけるリッチテキスト編集 | MDN
注意しなければならないのは、ブラウザ毎にかなり挙動が違うということです。
contenteditable (直接編集) の傾向と対策 【 ありのごとくあつまりて 】
特にIEでの挙動は明らかにおかしいので、まだまだ実際にwebサービスで使えるようなレベルではないと思います。