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 に答える