24
25

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

div内をtextareaやinputみたいに編集可能エリアにする

Last updated at Posted at 2016-11-27

Mediumみたいな直感的なブログエディターを作りたいなーと思って、できればtextareaやinputを使いたくないなと思っていたら、HTMLでcontenteditableという属性があることがわかった。

こんな感じで使用する。

<div contenteditable="true">
<p>ここのテキストが編集・削除できるようになります</p>
</div>

おー、これちょっと感動。

あとはフォーカスなどCSSで消したり付け加えたりすればいい感じになりますね。
inputとかtextareaっていかにも編集できますよ!って感じがなんかスマートじゃないなーなんて思って、
もっと紙に字を書くみたいにサラサラって書けないのかなって模索していました。

お問合わせフォームとかはUI的にフォーカスされて、いかにも入力できますのほうが、
ベストなのはわかりますが、ブログとか毎日使うようなものはサラッといきたいですね。

24
25
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
24
25

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?