Googleのログイン画面のようにplaceholderをinputの上に残すjquery

ニールセンの調査ではプレースホルダーを残せ、とのことだったので作ってみました。

ニールセンの元記事はこちら
https://u-site.jp/alertbox/form-design-placeholders

jquery

///////////////////////////////////////
// focus時にplaceholderをinputの上に表示する
//////////////////////////////////////

/*
* 使い方
*
* 1. 使いたいフォームに.js-keep-placeholderをつける
* 2. input要素にユニークなidをつける(id="last_name" など)
* 3. placeholderは通常通りinput要素に記載すればOK
*
* 郵便番号の自動入力など別の入力補助がある場合は
* setTimeout等を使って入力を待ってからkeepPlaceholderCheckを
* 実行すると入力後の値を判断してplaceholderの位置を調整します。

例）
$.when(
// 先に実行する処理
).done(function() { // 先に実行する処理の結果を待ってからplaceholderをチェック
setTimeout(function(){
keepPlaceholderCheck();
},200); //待つ時間(ミリ秒)
});

*/

//.js-keep-placeholder配下のinput要素をチェックして
// placeholderをspanに書き換える
function keepPlaceholderCheck() {
$('.js-keep-placeholder input').each(function(index, element) { input_id = element.id;
if ( input_id !== '' ) {
// input要素を取得
input = $('#'+input_id);
placeholder = $('#js-keep-placeholder__placeholder-text__'+input_id); // input要素のplaceholderを取得
placeholder_text = this.placeholder;

// placeholderがある時はspanに書き換える
if (placeholder_text !== '') {

// 元々のplaceholderは空にする
$(input).attr('placeholder','');

// inputにvalueが入ってるかを判断して見た目を変える
if (input.val() === '') {
$(input).after('' + placeholder_text + '');
} else {
$(input).after('' + placeholder_text + '');
}
} else {
// 別のjsで自動入力があった時に値があるかチェックする
if (placeholder) {
if (input.val() !== '') {
placeholder.addClass('js-keep-placeholder__placeholder-text--has-value'); }
}
}
}
});
}

keepPlaceholderCheck(); //ロード時のチェック

// inputがからカーソルが当たったときにplaceholderの表示方法を変える
$('.js-keep-placeholder input').on('focus',function(){
input_id = this.id;
if ( input_id !== '' ) {
// input要素とplaceholderを取得
input = $('#'+input_id);
placeholder = $('#js-keep-placeholder__placeholder-text__'+input_id); // placeholderとinputに見た目を変えるclassをつける
placeholder.addClass('js-keep-placeholder__placeholder-text--input-focus js-keep-placeholder__placeholder-text--has-value');
input.addClass('js-keep-placeholder__input-element--focus'); }
});

// inputがからカーソルが外れたときにplaceholderの表示方法を変える
$('.js-keep-placeholder input').on('blur',function(){
input_id = this.id;
if ( input_id !== '' ) {
// input要素とplaceholderを取得
input = $('#' + input_id);
placeholder = $('#js-keep-placeholder__placeholder-text__' + input_id); // placeholderに見た目を変えるclassを外す
placeholder.removeClass('js-keep-placeholder__placeholder-text--input-focus'); input.removeClass('js-keep-placeholder__input-element--focus'); // inputにvalueが空欄の場合はさらにclassを外す
if ( input.val() === '') {
$( placeholder
).removeClass('js-keep-placeholder__placeholder-text--has-value'); }
}
});

SCSS

/*
* focus時にplaceholderをinputの上に表示する
*/
$colorfocus: #00f !default; // focus時の色
.js-keep-placeholder {
&__input-element--focus {
border: 2px solid $colorfocus !important;
background-color: $white !important;
padding: 6px 10px !important;
}
&__placeholder-text {
position: absolute;
z-index: 10;
font-size: 1.6rem;
top: 0;
left: 0;
padding: 8px 12px;
color: #6c757d;
line-height: 1.5;
pointer-events: none;
transition: all 300ms 0s ease;
&--has-value,
&--input-focus {
top: -6px;
left: 5px;
background-color: #fff;
padding: 0 3px;
font-size: 1.2rem;
line-height: 1;
}
// --has-value,--input-focus
&--input-focus {
color: $colorfocus;
}
// --focus
}
// __placeholder-text
.form-group {
margin-bottom: 1.5rem;
}
.c-form__form-label {
margin-bottom: 10px;
}
}