フォームのlabel要素のテキストをjQueryでプレースホルダーにする

スポンサーリンク

フォームのlavel要素をHTML5の
placeholder属性にする、という
方法。jQueryを使用します。
フォームが固定されたCMSのスマ
フォサイトを作成するにあたり、
省スペース化したいのでこの方法
を使いました。

フォームのマークアップが固定のCMSのスマフォサイトでフォーム省スペース化に迫られて、label要素をplaceholder属性にする事で落ち着きました。折角なのでメモ。

Sample


label要素をplaceholder属性に当ててdisplay:none;しました。

$("input").each(function(){
    $(this).attr("placeholder",
          $('label[for='+ $(this).attr('id') +']').text());
});

labelのfor属性とマッチするid名のついたinput要素にplaceholder属性を加えます。

事情があって実際はもっと長いコードになってしまいました・・

何かの参考になれば幸いです。

URL :
TRB :

Comments & Trackbacks (1)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services