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

Ads

フォームの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属性を加えます。

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

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