skillup

技術ブログ

デザイン

フォーカス時のみ書き込み可能になるHTML要素について。contenteditableなど

投稿日:

通常はただのテーブル(or普通のHTML)ですが、クリックするとinputになり、入力が可能になる手法について。

contenteditableなど

普通のHTML要素に

などしてあげるとfocus時に入力可能な要素になります。

注意点としては下記のようなことが挙げられます。

  • tr,td要素はieでは動きません。divにつけるようにしましょう。
  • 複数行のもの+日本語のものは挙動がおかしくなる可能性があるようです。

君はHTML5の contentEditable 属性を知っているか

【HTML5】contenteditable属性

他、jQueryのプラグインなどでもクリック時に編集可能ということはできるようです。

jquery.editableについて

 

-デザイン
-

執筆者:


comment

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

関連記事

no image

CSSの概要 主に適用ルールについて

昨日までリーダブルコードを読みまして正しいコーディングについて書いてきました。 本日からは正しいCSSについてみていこうと。 Contents1 CSSとは?2 CSSの書き方3 CSSの挙動4 プロ …

no image

HTML/JS/JavaScriptのキャッシュ機能の無効化に関して

AngularJSを使っていまして、更新したのにキャッシュ機能が働いていてブラウザでは変更が反映されてない・・・なんてことがちょいつづき、キャッシュを無効化する機能を調査しました。 まず通常のHTML …

no image

positionを使うときに注意すること

positionを使ったときに色々なまとめ。 親>子>孫だったときに親がrelative、子、孫がabsoluteだと孫の基準点は子になる(ソース参照) position:absolute …

no image

HTML5のinputタグのvalidatorについて

HTML5は標準でinputタグのバリデーション機能がついており、必須チェックや簡単なエラーチェックなどをすることが出来たりします。 必須入力のほかにも、telやemail、時間など様々なタイプのもの …

no image

レスポンシブデザインの作成ポイント

本日はレスポンシブデザインの表現方法について。 スマホでは何も指定しなければブラウザはウェブサイトの幅が980pxと仮定しています。 要は通常の980px分をそのままiPhoneの画面に収まるよう縮小 …

アーカイブ