[JS]HTML5の「プレースホルダーテキスト」をスクリプトで実装する旧式と今時の方法

Post on:2011年3月31日

プレースホルダーテキストを実装するHTML

まずは、HTMLを見てみましょう。

HTML5

HTML5対応ブラウザでは、「placeholder」の値がテキストフィールドに表示されます。

<form class="form">
	<p><input type="text" placeholder="Your name please"></p>
	<p><input type="text" placeholder="Enter your email"></p>
	<p><input type="search" placeholder="Search"></p>
	<p><textarea placeholder="Write your comments here"></textarea></p>
</form>

JavaScriptを使った旧式の実装方法

「value」をチェックし、フォーカスされたら値を空にし、値が空ならテキストを返すように設定します。

JavaScript

<input type="text" value="Search" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}">

この方法はそれぞれのフィールドをチェックしなければならないため、効率的ではありません。

[ad#ad-2]

ModernizrとjQueryを使った今時の実装方法

プレースホルダーテキストをクロスブラウザ対応にするために、「Modernizrと「jQuery」を使用します。

JavaScript

「modernizr.js」と「jquery.js」を外部ファイルとし、下記のスクリプトを記述します。

$(document).ready(function(){

if(!Modernizr.input.placeholder){

	$('[placeholder]').focus(function() {
	  var input = $(this);
	  if (input.val() == input.attr('placeholder')) {
		input.val('');
		input.removeClass('placeholder');
	  }
	}).blur(function() {
	  var input = $(this);
	  if (input.val() == '' || input.val() == input.attr('placeholder')) {
		input.addClass('placeholder');
		input.val(input.attr('placeholder'));
	  }
	}).blur();
	$('[placeholder]').parents('form').submit(function() {
	  $(this).find('[placeholder]').each(function() {
		var input = $(this);
		if (input.val() == input.attr('placeholder')) {
		  input.val('');
		}
	  })
	});

}

Modernizrはプレースホルダーがサポートされているかどうかをチェックし、サポートされていない場合はjQueryでプレースホルダーテキストを実装しています。

Webkit系ブラウザのSearchのスタイル

Webkit系ブラウザでは、「type="search"」を使った検索のインプットフィールドにスタイルを加えます。

これを取り除くには、下記のスタイルシートを使用します。

CSS

input[type=search] {
	-webkit-appearance: none;
}

input[type="search"]::-webkit-search-decoration, 
input[type="search"]::-webkit-search-cancel-button {
	display: none;
}