contenteditableな要素にplaceholderを与える
Result タイトルの通り、contenteditableで編集可能な要素にplaceholderを与える、というもの 結果から言うと:emptyを使って何も入力されてない状態の時に:beforeで任意のテキストを挿入します 挿入するテキストはcontent: attr()で挿入します css[contenteditable=true]:empty:before{ content: attr(placeholder); pointer-events: none; display: block; /* For Firefox */ } div[contenteditable=true] { border: 1px dashed #AAA; width: 290px; padding: 15px; }CSSのみで完結します html<div contenteditable="true" pl
input要素のplaceholderをフォーカス時に上にアニメーション付きで押し出すスクリプト・jQuery Label Better
ちょっとかわいかったので備忘録。placeholderとは別にテキストを用意し、inputにフォーカスした際にポンッと押し上げる、というスクリプトです。jQueryに依存します。 タイトルは語彙があります。プレースホルダーを、フォーカス時はラベルとして利用する、みたいな感じですが、フォーカス時に押し上げるテキストは別途カスタムデータ属性を設定します。 こんな感じ。一番右はplaceholder属性に書いたテキストとは別のテキストがでています。 $(".foo").label_better({ easing: "bounce" });セレクタを指定してエフェクトを設定。 <input type="text" class="foo" data-new-placeholder="bar" placeholder="hoge">上記ならplaceholderは「hoge」、フォーカス時に飛び出すテ
HTML5のplaceholder属性をクロスブラウザ対応にするjQueryプラグイン「jQuery-Placeholder」
HTML5のplaceholder属性をクロスブラウザ対応にするjQueryプラグイン「jQuery-Placeholder」jQueryプラグイン「jQuery-Placeholder」を紹介します。 jQuery-Placeholder １．基本 HTML5のplaceholder（プレースホルダー）属性は、フォームのテキストフィールドやテキストエリアに淡い色のテキストを表示する機能です。 HTML <input type="text" placeholder="入力してください" name="foo" value="" /> 実際の表示 HTML5のプレースホルダーをサポートしていないブラウザではplaceholder属性のテキストは表示されませんが、jQuery-Placeholderプラグインを利用すれば表示されるようになります。IE6などでも大丈夫です。 これで、focus()
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
