HTML5 プレースホルダー属性 (IE 互換) 実装 code_jquery

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;i<len;i++){
   var input=inputs[i],
   text=input.getAttribute('placeholder');
   if(input.type==='text'&&text){
    placeholder(input)
   }
  }
 }
 });

コードをコピーして参照用に js ファイルとして保存するだけで、何も処理する必要がなく、非常に便利です。

例: これにより、IE の入力にプレースホルダー属性が表示されますが、ページに入力が 1 つしかない場合は問題ありません。入力に値が入力されていない場合は、空になります。入力すると、プレースホルダー値が自動的に value に入力され、エラーが発生します。例:

。

<input type="text" placeholder="输入商品编码" name="goodscode" id="goodscode" value="123" />
<input type="text" placeholder="输入商品名称" name="goodsname" id="goodsname" value="输入商品名称" />

解決策は、バックグラウンドで独自の判断を行うことです。おそらく上記の js ファイルで解決できるので、後で検討します~!