HTML5のplaceholder属性の使用例と表示を美しくする方法effect_html5チュートリアルスキル

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

HTML コード

コードをコピー

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

< ;input type="text" name="first_name" placeholder="あなたの名前..." />

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

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

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

コードをコピーしますコードは次のとおりです:

function hasPlaceholderSupport() {
var input = document.createElement('input');
return ( 'placeholder' in input);
}

ユーザーのブラウザがプレースホルダー機能をサポートしていない場合は、MooTools、Dojo、またはその他の JavaScript ツールを使用して実装する必要があります:

コードをコピーしますコードは次のとおりです:

/* mootools ftw! var firstNameBox = $('first_name '),
message = firstNameBox.get('placeholder');
firstNameBox.addEvents({
focus: function() {
if(firstNameBox.value = = メッセージ) { searchBox.value = ''; }
},
Blur: function() {
if(firstNameBox.value == '') { searchBox.value = メッセージ; }
});

CSS でプレースホルダーを美しくする

さらなる調査中に、別の興味深い CSS 機能を発見しました。CSS は INPUT プレースホルダー効果を美しくします。単純な CSS コードを使用して、テキスト ボックス内のプレースホルダー テキストを美しくしてみましょう。

CSS コード

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

コードをコピーします

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

/ * all */

::-webkit-input-placeholder { color:#f00; }

::-moz-placeholder { color:#f00; } /* Firefox 19 */
:-ms -input-placeholder { color:#f00; } /* つまり */
input:-moz-placeholder { color:#f00; }
/* 個別: webkit */
#field2 ::- webkit-input-placeholder { color:#00f; }
#field3::-webkit-input-placeholder { color:#090; text-transform:uppercase; ::- webkit-input-placeholder { font-style:italic; text-decoration:overline; color:#999; }
/* 個別: mozilla */
#field2:: -moz- プレースホルダー { color:#00f; }
#field3::-moz-placeholder { color:#090; text-transform:uppercase; }
#field4::-moz-placeholder { フォントスタイル:イタリック; 文字間隔:3px; }


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