プレースホルダーのパフォーマンスと互換性

(1)入力およびtextareaに適用される、HTML5に新しく追加された属性は、テキストボックスに灰色のフォントプロンプトとして表示されます。フォーカスした後、プロンプトは非表示になります。

(2)互換性:HTML5をサポートできるブラウザ:IE10、Firefox、Chrome、Safariなど、それ以前のバージョンはサポートしていません(IE5-IE9

        (A)すべてのブラウザと互換性があります(IE6-IE9)

function placeHolder(){
if(nodes.length && !("placeholder" in document_createElement_x("input"))){
          for(i=0;i<nodes.length;i++){
              var self = nodes[i],
                  placeholder = self.getAttribute('placeholder') || '';     
              self.onfocus = function(){
                  if(self.value == placeholder){
                     self.value = '';
                     self.style.color = "";
                  }               
              }
              self.onblur = function(){
                  if(self.value == ''){
                      self.value = placeholder;
                      self.style.color = pcolor;
                  }              
              }                                       
              self.value = placeholder;  
              self.style.color = pcolor;              
          }
      }
}

        (B)一貫したパフォーマンス

                ラベルまたは背景画像のフォーカスを使用して非表示にする

        (C)IE10の位置が低すぎるため、ページが見苦しくなります。ハックを使用してください

padding-bottom:5px\0;

(3)違い:Chrome、Firefoxのフォーカスプロンプトは非表示でなく、非表示のコンテンツのみを入力します

(4)テキストボックスのテキストとプロンプトスタイル変更するにはどうすればよいですか?例:テキスト:赤いプロンプト:ピンク

color:red;
//ff
::-moz-placeholer:pink; 
//chrome safari
::-webkit-input-placeholder:pink;
//IE10
:-ms-input-placeholder:pink;

    

おすすめ

転載: blog.csdn.net/u010682774/article/details/79624033