HTML5は、入力の新しいタイプタイプ、フォーム検証など、Webフォームに多くの拡張機能を作成しました。プレースホルダーは、HTML5に追加された別の属性です。入力またはTextareaがこの属性を設定すると、この値のコンテンツがテキストボックスにグレーワードプロンプトとして表示されます。テキストボックスが焦点を合わせると、プロンプトのテキストが消えます。過去に、この効果を達成するために、JavaScriptはそれを制御するために使用されました。
プレースホルダーは新しい属性であるため、現在サポートしているブラウザはごくわずかです。ブラウザがそれをサポートするかどうかを検出する方法は？ （その他のHTML5/CSS3機能検出にアクセスできます）
function hasplacholdersupport（）{
document.createelement（ 'input'）に「プレースホルダー」を返します。
}
デフォルトのプロンプトテキストは灰色で、テキストスタイルはCSSを介して変更できます。
/ * all */:: -webkit-input-placeholder {color：＃f00; } input：-moz-placeholder {color：＃f00; } / *個人：webkit * /＃field2 :: -webkit-input-placeholder {color：＃00f; }＃field3 :: -webkit-input-placeholder {color：＃090;背景：lightgreen;テキスト変換：大文字; }＃field4 :: -webkit-input-placeholder {font-style：italic;テキスト装置：オーバーライン;レター間隔：3px;色：＃999; } / *個人：mozilla * /＃field2：-moz-placeholder {color：＃00f; }＃field3：-moz-placeholder {color：＃090;背景：lightgreen;テキスト変換：大文字; }＃field4：-moz-placeholder {font-style：Italic;テキスト装置：オーバーライン;レター間隔：3px;色：＃999; }プレースホルダーをサポートしていない他のブラウザと互換性があります。
var placeholder = {
_support ：（ function（）{
document.createelement（ 'input'）に「プレースホルダー」を返します。
}）（）、
//プロンプトテキストのスタイルは、ページ上の他の場所で定義する必要があります
className： 'ABC'、
init：function（）{
if（！placeholder._support）{
// Textareaは処理されていません、必要なことを追加してください
var inputs = document.getElementsByTagname（ 'input'）;
PlaceHolder.Create（入力）;
}
}、
create：function（inputs）{
var入力;
if（！inputs.length）{
入力= [入力];
}
for（var i = 0、length = inputs.length; i <length; i ++）{
input = inputs [i];
if（！placeholder._support && input.attributes && input.attributes.placeholder）{
PlaceHolder._setValue（input）;
input.addeventlistener（ 'focus'、function（e）{
if（this.value === this.attributes.placeholder.nodevalue）{
this.value = '';
this.classname = '';
}
}、 間違い）;
input.addeventlistener（ 'Blur'、function（e）{
if（this.value === ''）{
PlaceHolder._setValue（this）;
}
}、 間違い）;
}
}
}、
_setValue：function（input）{
input.value = input.attributes.placeholder.nodevalue;
input.classname = placeholder.classname;
}
};
//ページの初期化時にすべての入力を初期化します
//placeholder.init（）;
//または要素を個別に設定します
//placeholder.create(document.getElementById('t1 '））;