HTML5 プレースホルダー (空のプロンプト) の概要attribute_html5 チュートリアルのスキル

元のアドレス: HTML5 のプレースホルダー属性
デモ アドレス: プレースホルダー デモ
元の日付: 2010 年 8 月 9 日
翻訳日: 2013 年 8 月 6 日
ブラウザーには多くの HTML5 機能が導入されました。HTML に基づいた機能もあれば、JavaScript API の形式のものもありますが、それらはすべて便利です。私のお気に入りの 1 つは、input 要素の placeholder 属性の導入です。
プレースホルダー属性は、入力ボックスが入力フォーカスを取得するまで紹介テキストを表示します。ユーザーがコンテンツを入力すると、紹介コンテンツは自動的に非表示になります。この手法が JavaScript に実装されているのを何千回も見たことがあるでしょうが、一般的には HTML5 のネイティブ サポートの方が優れています。
HTML コードは次のとおりです:

コードをコピー

コードは次のとおりです:

< input type="text" name="address" placeholder="本籍地住所を入力してください...">

必要なのは、プレースホルダー属性フィールドを追加することだけです。
プレースホルダーのサポートをテストする
(これは 2010 年の記事であることに注意してください) 、現在まで、2013 年にはすべての主要なブラウザーがサポートするはずです。)
プレースホルダーは新しい機能であるため、ブラウザーのサポートをテストする必要があります。 JS コードは次のとおりです:

コードをコピー

コードは次のとおりです:

// JS の場合 input 要素を作成し、その要素にプレースホルダーと呼ばれる属性があるかどうかを判断します
// ブラウザがサポートしている場合、この属性は js で参照される DOM に存在します
function hasPlaceholderSupport() {
var input = document.createElement('input');
return ('placeholder' in input);

ブラウザがプレースホルダー機能をサポートしていない場合は、 MooTools、Dojo、またはその他の JavaScript ツールなど、処理するには 1 つのフォールバック戦略が必要です。 (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 (placeholder);
}
});


placeholder は、JS フラグメントを置き換えるためのもう 1 つの優れた追加のブラウザー属性です。 HTML5 プレースホルダー スタイルも編集できます。
コード全体は次のとおりです。

コードをコピーします

コードは次のとおりです: