skillup

技術ブログ

デザイン

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

投稿日:

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

contenteditableなど

普通のHTML要素に

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

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

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

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

【HTML5】contenteditable属性

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

jquery.editableについて

 

-デザイン
-

執筆者:


comment

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

関連記事

no image

チェック状態のradio,checkでの要素の表示、非表示

CSS小ネタ系。 チェックボックスやラジオと隣接するテキストボックスがあって、チェックがあった時のみ表示したい。(例えばその他の自由入力欄) 完全に隣接の場合にはCSSの+が使えるんですが、そうもいか …

no image

レスポンシブサイト作成に関して

実務でレスポンシブを作ったので、そのまとめに関して。ちなみにPCのサイト自体も作ったことなかったのでそのまとめに関しても。 メインキャッチの処理は縦横の比率を変えない、常に要素を中央に配置するとなると …

no image

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

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

no image

Bootstrapまとめ form+画像

前回に引き続きbootstrapネタについて。 Contents1 フォーム1.1 通常のinput1.2 項目名:入力欄の形式1.3 入力欄+ボタン(検索などでよくあるパターン)2 画像2.1 参考 …

no image

css tips display:table,marginの相殺,font-size指定,margin上下の%など

昨日、喫茶店でみていた参考書でみたCSSのネタに関して忘れないようにメモ。 Contents1 display:table2 inputのfocus時の青を消す3 marginの相殺4  font-s …