在没有 JQuery 的 IE 中使用 Javascript 检索“占位符”值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16199646/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Retrieve the "Placeholder" value with Javascript in IE without JQuery
提问by joshkrz
I have some Javascript code that checks if a browser supports Placeholders and if it doesn't it creates them itself. Now this works on some older browsers but not all, especially IE.
我有一些 Javascript 代码来检查浏览器是否支持占位符，如果不支持，它会自行创建它们。现在这适用于一些较旧的浏览器，但不是全部，尤其是 IE。
All I need to do it get the "Placeholder" value, at the moment the placeholder in IE9 is "undefined".
我需要做的就是获取“占位符”值，目前 IE9 中的占位符是“未定义”。
Here is my code:
这是我的代码：
//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;
} I am using 0% Jquery, I feel it's too bulky to solve small problems, plus I want to learn pure Javascript. Modernizr is a no too although I may come round to using it at some point.
我用的是0%的Jquery，感觉小问题解决不了，加上想学纯Javascript。Modernizr 也不行，尽管我可能会在某个时候开始使用它。
UPDATE
更新
This is the working code. Tested in IE 8 and 9. (The function call is within an if/else for "placeSupport".)
这是工作代码。在 IE 8 和 9 中进行了测试。（函数调用在“placeSupport”的 if/else 中。）
//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();
}
}
回答by Chase
If you're not sure if you're able to use certain functionality/attributes, try caniuse.com- you'll notice that placeholder is not available in IE9.
如果您不确定是否可以使用某些功能/属性，请尝试使用caniuse.com- 您会注意到占位符在 IE9 中不可用。
Try using getAttribute("placeholder")
尝试使用 getAttribute("placeholder")
getAttribute() returns the value of the named attribute on the specified element. If the named attribute does not exist, the value returned will either be null or "" (the empty string); see Notes for details.
getAttribute() 返回指定元素上命名属性的值。如果命名属性不存在，则返回的值将为 null 或 ""（空字符串）；有关详细信息，请参阅注释。
HTML
HTML
<input id="demo" placeholder="Rawr" />
JavaScript
JavaScript
var placeholder = document.getElementById("demo").getAttribute("placeholder");
console.log(placeholder);
