skillup

技術ブログ

デザイン

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

投稿日:

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

contenteditableなど

普通のHTML要素に

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

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

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

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

【HTML5】contenteditable属性

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

jquery.editableについて

 

-デザイン
-

執筆者:


comment

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

関連記事

no image

UIまで手が回らないプログラマのための画像加工サービス&ツール紹介など

本業はプログラマ―なんですが、ガチンコ塾のブログの画像を作る程度の加工などをちょこちょこやってます。 プログラマーといえどUIを全く気にしないのは問題ですし、中小企業だと広く浅くできる人間が求められる …

no image

CSSネタに関して

何回か書いてきたCSSのまとめネタ的なもの。 紙で印刷しておくと生産性が3倍ぐらいになる。思った以上にコーディングがしやすい。 良く使うユーティリティ系の操作をまとめる。ベンダープレフィックス以外にも …

no image

boostrapでのヘッダーナビ作成

昔から私の作るWEBアプリはデザインがめちゃくちゃなことが多かったんですが、最近は多少デザインにも気を配るようになってきました。 実はCSSがあまり得意ではなくて、うまく組むためにかなり苦戦していまし …

no image

HTML5について

CSSのサンプルを書いていく途中で、HTML5タグが出来てたので簡単におさらいです。 Contents1 HTML5のメリット1.1 form周りのhtml1.2 文章構造の明確化1.2.1 navに …

no image

css写経学習で感じたこと

こっちのブログでも書いてますが、CSSを最近写経してて気づいたことがいろいろあるんでメモリます。 常時追加予定。 Contents1 全体2 レスポンシブ3 レイアウト4 list系5 display …