BLOG
ブログ

2021.08.03

contenteditable属性を使うか、使わないか

ホームページを見たまま編集できる機能を作りたくて調べていたら、HTML5にcontenteditable属性というのがあるのを初めて知りました。
HTMLのテキストが入る要素にcontenteditable属性を追加するだけで、その要素がinput要素のように編集可能になります。
例えば以下のように。

ここ編集できます。

結論

タイトルにあったcontenteditable属性を使うか、使わないかですが
結論は「使いたいけど使いこなせない。」です。

理由は私はvue.jsを使うことが多いのですが、contenteditable属性を指定した要素を編集してもバインディングしないため、inputイベントやfocus, blurイベントを駆使してデータを取得しなければなりませんが、カーソル位置の挙動がおかしくなり私は断念しました。
これは私の能力が低いだけで使いこなせるエンジニアはいます。例えばtwitterです。
twitterのツイート入力エリアはcontenteditableらしく、確認したら本当にそうでした。
twitterのツイート入力エリアはご存知の通り、ハッシュタグを入力しますと自動でハッシュタグのリンクになりますし、URLアドレスを入力しますとリンクになります。これはinputやtextareaでは難しいのではないでしょうか。
twitterもそうですが、入力エリア内に多くの機能を持たせる場合、contenteditable属性は魅力的で奥が深い機能だと思います。

幸い、入力エリア内に機能を持たせる予定は今の所ないので、しばらくはinput要素で頑張ろうと思います。

あべ

CONTACT

下記のフォームに必要事項を記入してください。※お問い合わせの際には個人情報保護方針のご確認をお願い致します。

会社名
お名前必須
ご住所
郵便番号
都道府県
市区町村
町名番地等
建物名
お電話番号必須
- -
メールアドレス必須
お問い合わせ内容必須
メッセージ