3

我有一些 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 也不是，尽管我可能会在某个时候开始使用它。

更新

这是工作代码。在 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();

}

4

1 回答 1

11

如果您不确定是否能够使用某些功能/属性，请尝试caniuse.com - 您会注意到占位符在 IE9 中不可用。

尝试使用getAttribute("placeholder")

getAttribute() 返回指定元素上命名属性的值。如果命名属性不存在，则返回的值为 null 或 ""（空字符串）；有关详细信息，请参阅注释。

例子

HTML

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

JavaScript

var placeholder = document.getElementById("demo").getAttribute("placeholder");
console.log(placeholder);
于 2013-04-24T18:37:03.663 回答