skillup

技術ブログ

デザイン

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

投稿日:

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

contenteditableなど

普通のHTML要素に

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

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

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

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

【HTML5】contenteditable属性

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

jquery.editableについて

 

-デザイン
-

執筆者:


comment

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

関連記事

no image

テンプレートエンジンTwigについて

SmartyにかわるテンプレートエンジンとしてTwig(ツィッグ)を勉強中。 といってもテンプレートエンジンなので基本的なことはほとんど一緒っぽいですが。 Contents1 インストール2 基本的な …

no image

object-fitによる画像比率を保ったセンタリング

CSSでレイアウトを組むときにネックになるのが画像のレイアウトです。 と言うのも可変要素であり、幅を制御するのが難しかったりします。 参考リンク メインで使う画像のcssについて まあ縦長とか横長とか …

no image

cssでのmax,minや画像の配置に関して

主に画像なんかで使われるんですが、max(min)-width(height)などの使い方に関して。 えーmax(min)はどういうときに使われるかというとまず可変な要素に対して使われることが多いです …

no image

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

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

no image

スマホサイトの横ぐらつき ~border-size:border-boxigについて

スマホサイトをつくっていたところ、横幅がぐらつくというあり得ない事態に・・・ どうやら内部の幅が100%を超えるときにこの現象が起きてしまうようです。 Contents1 対策1 コンテンツの幅が10 …