IE_html5 チュートリアル スキルで Html5 プレースホルダー属性をサポートするプラグイン

HTML5 では、新しい入力タイプ、フォーム検証など、Web フォームに多くの機能強化が加えられています。

プレースホルダーは、HTML5 で追加されたもう 1 つの新しい属性です。この属性が入力エリアまたはテキストエリアに設定されている場合、テキスト ボックスがフォーカスされると、値の内容が灰色のテキスト プロンプトとしてテキスト ボックスに表示されます。プロンプトテキストが消えます。以前は、この効果は JavaScript を使用することによってのみ実現できました。Firefox、Google Chrome などはこの機能のサポートを表明していましたが、矛盾していると感じたのは IE だけでした。

例:

IE でプレースホルダーをサポートできるようにする強力な属性プラグインを紹介します。プレースホルダーをサポートしていない他のブラウザーとも互換性があります。コードは次のとおりです:

コードをコピーします

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

$(document).ready(function(){
var doc=document,
inputs=doc.getElementsByTagName('input'),
supportPlaceholder='placeholder'in doc.createElement('input' ),
placeholder=function(input){
var text=input.getAttribute('placeholder'),
defaultValue=input.defaultValue;
if(defaultValue==''){
input.value=text
}
input.onfocus=function(){
if(input.value===text)
{
this.value=''
}
};
input.onblur =function(){
if(input.value====''){
this.value=text
}
}
};
if(!supportPlaceholder){
for(var i=0,len=inputs.length;ivar input=inputs[i],
text=input.getAttribute('placeholder');
if(input.type==='text'&&text){
placeholder(input)
}
}
});

コードを直接コピーし、参照用に js ファイルとして保存します。

例: これは確かに IE の入力になります。プレースホルダー属性を表示しますが、ページに入力が 1 つしかない場合は幸いです。複数の入力があり、入力に値が入力されない場合、空の入力によって自動的にプレースホルダーの値が入力され、エラーが発生します。例:

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

< input type="text" placeholder="商品コードを入力してください" name="商品コード" id="商品コード" value="123" />

解決策は、バックグラウンドで独自に判断することです。おそらく上記で解決できるでしょう。 js ファイルを作成して、後で勉強します~!