skillup

技術ブログ

JavaScript

クリック編集のjQuery

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

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

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

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

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

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

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

-JavaScript
-

執筆者:


comment

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

関連記事

no image

vueの環境構築に関して(モジュールバンドラの比較やvue-cliコマンドなど)

vueをビルドする場合、一般的にはwebpackなどのモジュールバンドラを使うかと思います。少しまとめて置こうかと思います。 Contents1 モジュールバンドラ1.1 webpack1.2 lar …

no image

webpackについて再履修2

以前やったこの記事への追記的な意味で。 webpackについて再履修 Contents1 webpack-cli2 gulp-webpackは非推奨3 devtoolでデバッグ可能 webpack-c …

no image

JavaScriptでのDom操作に関して

画面系の複雑な処理をやる場合、JavaScriptを使うのですが、個人的に気をつけているポイントなど。 Contents1 ES6のクラス化2 DOM要素取得のポイント2.1 class自体でのスコー …

no image

requirejsでのモジュール読み込み

JavaScriptのモジュール化では2019年5月現在ではwebpackなどを使うことが一般的かと思いますが、以前はrequire.jsなどというライブラリがあったようです。 例えば下記のようなファ …

no image

npmでのJSライブラリインストール&ビルド(※Laravel使用時)

JavaScriptのインストールですが、いままではライブラリを1つ1つインストールしてました。 bowerでインストールしたこともあったんですが、読み込み自体は1つ1つしていました。 先日仕事でnp …