在沒有JQuery的情況下在IE中檢索「佔位符」值Javascript

Question

我有一些Javascript代碼，用於檢查瀏覽器是否支持佔位符，如果沒有，它會自己創建它們。現在，這適用於一些較舊的瀏覽器，但不是全部，特別是IE。

所有我需要做的就是獲得「佔位符」值，此時IE9中​​的佔位符是「未定義的」。

這裏是我的代碼：

//Test if Placeholders are supported 
var test = document.createElement("input"); 
if ("placeholder" in test) { 
    var testholder = true; 
    } 
else { 
    var testholder = false; 
    } 

//Fix unsupported placeholders 
function placeHolder(id) 
{ 
var demo = document.getElementById(id); 

    demo.className = "fix-hint"; 
    demo.value = demo.placeholder; 

    demo.onfocus = function() 
    { 
     if (this.className == "fix-hint") 
     { 
     this.value = ""; this.className = "fix-nohint"; 
     } 
    }; 

    demo.onblur = function() 
    { 
     if (this.value === "") 
     { 
     this.className = "fix-hint"; this.value = demo.placeholder; 
     } 
    }; 
    return false; 

} 我使用0％Jquery的，我覺得它太笨重，解決小問題，加上我想學純JavaScript。 Modernizr是一個沒有，儘管我可能會在某個時候使用它。

UPDATE

這是工作的代碼。在IE 8和9測試的（函數調用內的if/else爲 「placeSupport」。）

//Check if placeholders are supported 

placeholderSupport = ("placeholder" in document.createElement("input")); 
if(!placeholderSupport){ 
    var placeSupport = false; 
}else{ 
    var placeSupport = true;} 

//Support placeholders in older browsers 

function placeHolder (id) 
{ 
var el = document.getElementById(id); 
var placeholder = el.getAttribute("placeholder"); 

el.onfocus = function() 
{ 
    if(this.value == placeholder) 
    { 
     this.value = ''; 
     this.className = "fix-nohint"; 
    } 
}; 

el.onblur = function() 
{ 
    if(this.value.length == 0) 
    { 
     this.value = placeholder; 
     this.className = "fix-hint"; 
    } 
}; 

el.onblur(); 

}

Answer 1

如果你不知道，如果你能使用某些功能/屬性，請嘗試caniuse.com - 您會注意到佔位符在IE9中不可用。

使用getAttribute("placeholder")

的getAttribute（）返回指定 元件上的命名屬性的值嘗試。如果指定的屬性不存在，則返回的值 將爲空或「」（空字符串）。請參閱注意 的詳細信息。

EXAMPLE

HTML

<input id="demo" placeholder="Rawr" /> 

的JavaScript

var placeholder = document.getElementById("demo").getAttribute("placeholder"); 
console.log(placeholder);