Vueと共通

【Nuxt.js】form実践編:contenteditableでイライラ解消!

前置き

formで使うinput, textarea
中でも何かと使い勝手の悪いtextareaさん😕
HTMLのグローバル属性
contenteditableを使って
textareaをもっと見やすくしてみましょう!

textarea

contenteditable


contenteditableって?

簡単にいうと編集モードにしてくれます。
編集できる+文字数に応じて幅が変化します!
分かりやすくbuttonタグにつけましたが
グローバル属性のため、どのタグにつけてもOKです。

ただし

textareaにはcontenteditable属性が使えません!
そのためtextarea風の入力欄を作るには
divにつけて擬似的に作ります!


使いやすさ比較

textarea

  • 基本的に高さが固定されるので全体が見えない
    リサイズボタンで拡大縮小できるけど
  • 横幅も動いて見にくい
  • リサイズボタンがデザインできない
    resize: none;で消すと拡大縮小できない
  • 色々使い勝手が悪い

div contenteditable="true"

  • 横幅だけ固定してしまえば
  • 縦幅が文字数に応じて伸縮し
    とっても見やすい!!✨👀

コード比較

textarea

chromeだとフォントサイズが
小さく見えることがあります。
なのでtextareaの場合のみ
font-size: 100%; を追記します✍️

デフォルトのフォントサイズ16pxを指定すると
font-familyも変わる場合があるようです。

このどちらかで調整しましょう!

) components

) pages

div contenteditable="true"

textareaをdiv contenteditable="true"に変更!
複数行になるためrole="textbox"も追加💡

cssはtextareaとほとんど変わりません。
ただし当然ですがinput, textareaの
placeholder属性は使えません😣💦

) components

) pages

-Vueと共通
-,

© 2020 aLiz Nuxt