最近のWEBサービスだと表示の画面と編集画面が同じになっていて、一見表示なんだけど、クリックすると特定の項目は編集できる、そんな画面がふえていきていますよね。
先日社内アプリをつくっていたところ、そういう仕様の画面を作ってほしいといわれたので実装することに。
といってもそれほど難しいものではなく、下記のようなことをjqueryで書きます。
- 編集可能なエリアをクリック時にinputタグを.html()で入れる。
- 同時にinputタグにfocusする
- 編集後終わったらcssをかえ、テキストを入力する。
ソースですが、下記のリンクが一番参考になるので貼っておきます。