placeholder和ie9

Question

對於在IE 9中顯示佔位符，我使用了以下腳本 它工作正常，但在刷新後的某些頁面中只有其工作。

var _debug = false; 
var _placeholderSupport = function() { 
    var t = document.createElement("input"); 
    t.type = "text"; 
    return (typeof t.placeholder !== "undefined"); 
}(); 

window.onload = function() { 
    var arrInputs = document.getElementsByTagName("input"); 
    for (var i = 0; i < arrInputs.length; i++) { 
     var curInput = arrInputs[i]; 
     if (!curInput.type || curInput.type == "" || curInput.type == "text") 
      HandlePlaceholder(curInput); 
    } 
}; 

function HandlePlaceholder(oTextbox) { 
    if (!_placeholderSupport) { 
     var curPlaceholder = oTextbox.getAttribute("placeholder"); 
     if (curPlaceholder && curPlaceholder.length > 0) { 
      Debug("Placeholder found for input box '" + oTextbox.name + "': " + curPlaceholder); 
      oTextbox.value = curPlaceholder; 
      oTextbox.setAttribute("old_color", oTextbox.style.color); 
      oTextbox.style.color = "$placeholder"; 
      oTextbox.onfocus = function() { 
       Debug("input box '" + this.name + "' focus"); 
       this.style.color = this.getAttribute("old_color"); 
       if (this.value === curPlaceholder) 
        this.value = ""; 
      }; 
      oTextbox.onblur = function() { 
       Debug("input box '" + this.name + "' blur"); 
       if (this.value === "") { 
        this.style.color = "$placeholder"; 
        this.value = curPlaceholder; 
       } 
      }; 
     } 
     else { 
      Debug("input box '" + oTextbox.name + "' does not have placeholder attribute"); 
     } 
    } 
    else { 
     Debug("browser has native support for placeholder"); 
    } 
} 

function Debug(msg) { 
    if (typeof _debug !== "undefined" && _debug) { 
     var oConsole = document.getElementById("Console"); 
     if (!oConsole) { 
      oConsole = document.createElement("div"); 
      oConsole.id = "Console"; 
      document.body.appendChild(oConsole); 
     } 
     oConsole.innerHTML += msg + "<br />"; 
    } 
} 

Answer 1

我會推薦使用許多經過充分測試的佔位符polyfills之一。 HTML5請有這方面的一些很好的建議，以及： http://html5please.com/#placeholder

Answer 2

試試這個：

if (!("placeholder" in document.createElement("input"))) 
{ 
    $("input[placeholder]:not([type='password']), textarea[placeholder]").each(function() 
    { 
     var val = $(this).attr("placeholder"); 
     if (this.value == "") 
     { 
      this.value = val; 
     } 

     $(this) 
      .focus(function() 
      { 
       if (this.value == val) 
       { 
        this.value = ""; 
       } 
      }) 
      .blur(function() 
      { 
       if ($.trim(this.value) == "") 
       { 
        this.value = val; 
       } 
      }) 
    }); 
} 

$('form') 
    .submit(function() 
    { 
     $(this).find("input[placeholder], textarea[placeholder]").each(function() 
     { 
      if (this.value == $(this).attr("placeholder")) 
      { 
       this.value = ""; 
      } 
     }); 
    }); 

Answer 3

/* <![CDATA[ */ 
$(function() { 
var input = document.createElement("input"); 
if(('placeholder' in input)==false) { 
    $('[placeholder]').focus(function() { 
     var i = $(this); 
     if(i.val() == i.attr('placeholder')) { 
      i.val('').removeClass('placeholder'); 
      if(i.hasClass('password')) { 
       i.removeClass('password'); 
       this.type='password'; 
      }   
     } 
    }).blur(function() { 
     var i = $(this);  
     if(i.val() == '' || i.val() == i.attr('placeholder')) { 
      if(this.type=='password') { 
       i.addClass('password'); 
       this.type='text'; 
      } 
      i.addClass('placeholder').val(i.attr('placeholder')); 
     } 
    }).blur().parents('form').submit(function() { 
     $(this).find('[placeholder]').each(function() { 
      var i = $(this); 
      if(i.val() == i.attr('placeholder')) 
       i.val(''); 
     }) 
    }); 
} 
}); 
/* ]]> */ 

使用這一個..它確實有效！

Answer 4

試試這個：

$（文件）。就緒（函數（）{

$('.ie9 input, .ie8 input').each(function(index){ 
    $(this).val($(this).attr('placeholder')); 
}); 

$('.ie9 input, .ie8 input').focusin(function(){ 
    var val = $(this).val(); 
    var place = $(this).attr('placeholder'); 
    if(place == val){ 
     $(this).val(''); 
    } 
}); 
$('.ie9 input, .ie8 input').focusout(function(){ 
    var val = $(this).val(); 
    if(val == ''){ 
     $(this).val($(this).attr('placeholder')); 
    } 
}); 

}）;