HTML5プレースホルダー属性の詳しい説明

この記事では、主に HTML5 プレースホルダー 属性について詳しく紹介します。プレースホルダー属性を使用すると、テキスト ボックスにプロンプ​​ト情報を表示できます。

HTML5 の機能には、多くの興味深い新機能が導入されています。 ; HTML に反映されるものもあれば、

JavaScript API に反映されるものもありますが、どれも非常に便利です。私のお気に入りの機能の 1 つは、テキスト ボックス (INPUT) のプレースホルダー属性です。プレースホルダー属性を使用すると、テキスト ボックスに情報を入力すると、プロンプト情報が非表示になります。この効果はこれまでに何度も見たことがあるかもしれませんが、そのほとんどは JavaScript で実装されていましたが、現在では HTML5 がネイティブ サポートを提供しており、その効果はさらに優れています。

HTML コード

<input type="text" name="first_name" placeholder="你的姓名..." />

また、テキスト ボックスの宣言タグにプレースホルダー属性を追加するだけでよいこともわかりました。この効果を作成するために JavaScript はまったく必要ありません。

ブラウザがプレースホルダー属性をサポートしているかどうかを確認してください

プレースホルダーは新しい属性であるため、ブラウザがそれをサポートしているかどうかを確認する必要があります。たとえば、IE6 と IE8 は確実にサポートしていません。ユーザー ブラウザーはプレースホルダー機能をサポートしていません。これを実装するには、MooTools、Dojo、または

他の

JavaScript ツールを使用する必要があります:

JavaScript Code复制内容到剪贴板
function hasPlaceholderSupport() {   
 var input = document.createElement('input');   
 return ('placeholder' in input);   
}

CSS を使用してプレースホルダーを美しくする

前回の記事で、次の方法を書きました。 CSS を使用してマウス選択テキストを美しくします。さらに調査を進めるうちに、もう 1 つの興味深い CSS 機能を発見しました。CSS は INPUT プレースホルダー効果を美しくします。単純な CSS コードを使用して、テキスト ボックス内のプレースホルダー テキストを美しくしてみましょう。

CSSコード

Firefox

での使い方はGoogle Chromeとは異なります。それらの名前は理解しやすいです:

JavaScript Code复制内容到剪贴板
/* mootools ftw! */  
var firstNameBox = $('first_name'),   
 message = firstNameBox.get('placeholder');   
firstNameBox.addEvents({   
 focus: function() {   
  if(firstNameBox.value == message) { searchBox.value = ''; }   
 },   
 blur: function() {   
  if(firstNameBox.value == '') { searchBox.value = message; }   
 }   
});

プレースホルダー テキストのフォント、色、スタイルを制御できます。テキスト ボックスのプレースホルダーをアニメーション化することもできます。 テキスト ボックスを美しくすることは小さなことのように思えるかもしれませんが、一部のインタラクティブな Web サイトでは、成功の鍵は細部にあります。現在、IE10 ではプレースホルダーのみがサポートされているため、このネイティブのプレースホルダー効果を使用する人が増えると思います。

以上がHTML5プレースホルダー属性の詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。