コメント：ブラウザは、多くのHTML5機能を導入しました。私のお気に入りの1つは、入力要素のプレースホルダー属性を導入することです。プレースホルダー属性は、入力ボックスが入力フォーカスを取得するまでガイドテキストを表示します。ユーザーがコンテンツを入力すると、ガイドコンテンツが自動的に非表示になります。
元のアドレス：HTML5のプレースホルダー属性デモアドレス：プレースホルダー
元の日付：2010年8月9日
翻訳日：2013年8月6日
ブラウザは多くのHTML5機能を紹介します。一部はHTMLに基づいており、一部はJavaScript APIの形式ですが、すべて非常に便利です。私のお気に入りの1つは、入力要素のプレースホルダー属性の導入です。
プレースホルダープロパティは、入力ボックスが入力フォーカスを取得するまで、ガイドテキストを表示します。ユーザーがコンテンツを入力すると、ガイドコンテンツが自動的に非表示になります。この手法が何千回もJavaScriptに実装されていることは間違いなく見られますが、HTML5からのネイティブサポートの方が一般的に優れています。
HTMLコードは次のとおりです。
<input type = "text" placeholder = "永久住所を入力してください...">
あなたがしなければならないのは、プレースホルダードメインといくつかのガイド付きテキストコンテンツを追加することであり、この効果を達成するために追加のJavaScriptスクリプトを必要としないことです。素晴らしいですか？
プレースホルダーサポートをテストします
（これは2010年から記事であることに注意してください。今まで、2013年には主流のブラウザがサポートするはずです。）
プレースホルダーは新機能であるため、ブラウザのサポートをテストする必要があります。 JSコードは次のとおりです。
// JSで入力要素を作成し、要素にプレースホルダーと呼ばれる属性があるかどうかを判断します
//ブラウザがそれをサポートしている場合、このプロパティはJSで参照されているDOMに存在します
function hasplacholdersupport（）{
var input = document.createelement（ 'input'）;
return（ 'placeholder' in input）;
}
ブラウザがプレースホルダー機能をサポートしていない場合、Mootools、Dojo、またはその他のJavaScriptツールなど、それを処理するためのフォールバック戦略が必要です。 （現在、Dojoはより少なく使用でき、中国ではjqueryとextjsが増えています。）
/* jQueryコード、もちろん、jqueryライブラリを紹介することを忘れないでください*/
$（function（）{
if（！HasPlaceHolderSupport（））{
//アドレス要素を取得します
var $ address = $（ "input [name = 'address']"）;
PlaceHolder = $ address.attr（ "Placeholder"）;
//フォーカスイベントをバインドします
$ address.bind（ 'focus'、function（）{
if（placeholder == $ address.val（））{
$ address.val（ ''）;
}
}）;
//フォーカスイベントを失いました
$ address.bind（ 'Blur'、function（）{
if（ '' == $ address.val（））{
$ address.val（プレースホルダー）;
}
}）;
}
}）;
プレースホルダーは、ブラウザがJSスニペットを置き換えるためのもう1つの素晴らしい追加プロパティであり、HTML5のプレースホルダースタイルを編集することもできます。
すべてのコードは次のとおりです。
<！doctype html>
<html>
<head>
<Title> HTML5プレースホルダー属性デモンストレーション</title>
<メタコンテンツ= "editplus">
<Meta content = "[email protected]">
<Meta content = "original = http：//davidwalsh.name/html5-placeholder">
<スクリプトsrc = "http://code.jquery.com/jquery-1.7.1.min.js"> </script>
<スクリプト>
// JSで入力要素を作成し、要素にプレースホルダーと呼ばれる属性があるかどうかを判断します
//ブラウザがそれをサポートしている場合、このプロパティはJSで参照されているDOMに存在します
function hasplacholdersupport（）{
var input = document.createelement（ 'input'）;
return（ 'placeholder' in input）;
}
/* jQueryコード、もちろん、jqueryライブラリを紹介することを忘れないでください*/
$（function（）{
if（！HasPlaceHolderSupport（））{
//アドレス要素を取得します
var $ address = $（ "input [name = 'address']"）;
PlaceHolder = $ address.attr（ "Placeholder"）;
//フォーカスイベントをバインドします
$ address.bind（ 'focus'、function（）{
if（placeholder == $ address.val（））{
$ address.val（ ''）;
}
}）;
//フォーカスイベントを失いました
$ address.bind（ 'Blur'、function（）{
if（ '' == $ address.val（））{
$ address.val（プレースホルダー）;
}
}）;
}
}）;
</script>
</head>
<body>
<div>
<form method = "post" action = "">
<input type = "text" placeholder = "永久住所を入力してください...">
<入力型= "submit" value = "test">
</form>
</div>
</body>
</html>