skillup

技術ブログ

JavaScript

クリック編集のjQuery

投稿日:2015年11月13日 更新日:

最近のWEBサービスだと表示の画面と編集画面が同じになっていて、一見表示なんだけど、クリックすると特定の項目は編集できる、そんな画面がふえていきていますよね。

先日社内アプリをつくっていたところ、そういう仕様の画面を作ってほしいといわれたので実装することに。

といってもそれほど難しいものではなく、下記のようなことをjqueryで書きます。

  1. 編集可能なエリアをクリック時にinputタグを.html()で入れる。
  2. 同時にinputタグにfocusする
  3. 編集後終わったらcssをかえ、テキストを入力する。

ソースですが、下記のリンクが一番参考になるので貼っておきます。

もっと便利に!jQueryでラクラクサイト制作(実践サンプル付き)

-JavaScript
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

PHP(DBアクセス)→HTML→Angularを実行するために

AngularJSでデータベースをつかうときには$httpや$resourceを使うことが多いですが、それ以前にAngularを読み込んでデータベースにアクセスしないことも重要かと思っています。 とい …

no image

JavaScriptのthisについて

今回はJavaScriptのthisについて。 JavaScriptのthisの場合、呼び出し方によってthisの参照先が変わります。 4種類あるとされていますが、使われ方で分類すると私の場合、下記の …

no image

font-awesomeのインストール(タスクランナー経由)

fontawesomeをタスクランナー経由でインストールすることについて。 CDNでインストールするだけならURL張り付けるだけですが。 インストール まずnpmで下記コマンドでインストールをします。 …

no image

timepickerについて

日付を入力するときに直接、文字入力するのがメンドイことからカレンダーが表示されるプラグインを使っている人は多いでしょう。 私も日頃Datepickerというライブラリを使っています。が、このプラグイン …

no image

vueでのコンポーネント間の変数のやりとりに関して

vueをコツコツと勉強していますが、コンポーネント間で変数の受け渡しをしたいときなどは色々注意が必要かと思います。 個人的には下記のような解釈で組んでおります。 Contents1 vuex2 syn …