2012-07-03 8 views
6

Webアプリケーションでplaceholder="xxx"属性を使用しようとしていますが、IE9用に特別なビジュアルを使用したくありません。人々はIE9でこの機能を達成するための良い提案を投げ捨てることができますか?IE9 HTML5プレースホルダ - 人々はどのようにこれを達成していますか?

私はここにいくつかのリンクを見つけましたが、提案されたスクリプトはどれも十分ではありませんでした...そして回答は2011年半ばからでしたので、もっと良い解決策があると思いました。おそらく、広く採用されているjQueryプラグインを使用していますか?私は、特定のCSSクラスなどを必要とするような、侵入型コードを必要とするものは使用したくありません。

ありがとうございました。

EDIT - パスワード入力フィールドでも動作する必要があります。

// the below snippet should work, but isn't. 
$(document).ready(function() { 
    initPlaceholders()(); 
} 

function initPlaceholders() { 
     $.support.placeholder = false; 
var test = document.createElement('input'); 
if ('placeholder' in test) { 
    $.support.placeholder = true; 
    return function() { } 
} else { 
    return function() { 
     $(function() { 
      var active = document.activeElement; 
      $('form').delegate(':text, :password', 'focus', function() { 
       var _placeholder = $(this).attr('placeholder'), 
        _val = $(this).val(); 
       if (_placeholder != '' && _val == _placeholder) { 
        $(this).val('').removeClass('hasPlaceholder'); 
       } 
      }).delegate(':text, :password', 'blur', function() { 
       var _placeholder = $(this).attr('placeholder'), 
        _val = $(this).val(); 
       if (_placeholder != '' && (_val == '' || _val == _placeholder)) { 
        $(this).val(_placeholder).addClass('hasPlaceholder'); 
       } 
      }).submit(function() { 
       $(this).find('.hasPlaceholder').each(function() { $(this).val(''); }); 
      }); 
      $(':text, :password').blur(); 
      $(active).focus(); 
     }); 
    } 
} 
} 
+1

[IE9のプレースホルダ(http://stackoverflow.com/questions/6366021/placeholder-in-ie9) –

答えて

12

私たちはちょうど同じことを研究しました。私たちは少し変更した後にthis gistAaron McCallで再利用することを決めました。主な利点は、シンプルで分かりやすいコードであることです。

  1. カーネルとsetup_placeholdersの部分を削除します。無名の関数ですぐに呼び出すだけです。

  2. vartestの前に追加します。

placeholderをサポートしているブラウザの場合、それは単にそれに該当します。また、既存のフォームに新しい入力要素(delegateの使用に注意)を処理します。しかし、動的な新しいフォーム要素は処理されません。 jQuery.onでこれを行うように修正されている可能性があります。

これが気に入らない場合は、hereのいずれかを使用できます。しかし、それらのいくつかは複雑すぎるか、または新しい要素を検出するためのsetTimeoutのような疑問のある設計上の決定を持っています。あなたが返される関数を呼び出し、匿名関数を呼び出しているので、それは、括弧の2ペアを使用する必要がある

注意(これは、異なる因数分解することができる):

ここ
(function() { 
    // ... 
})()(); 
+0

優れた簡潔なコードの可能重複。あなたはちょうど私に少し時間を救った、+1! – Lusitanian

+0

@David、明らかにするために、我々はリンクされた要点を書いていない。 –

+0

ああ。関係なく、リンクに感謝します。ライセンスは指定されていません。あなたは1つがあるかどうか知っていますか? – Lusitanian

2

はjQueryプラグインだことパスワードフィールドも使用できます。 Matthewによって提案されたコードほど小さいわけではありませんが、いくつか修正されています。私はこれをH5Validateと一緒にうまく使用しました。

http://webcloud.se/code/jQuery-Placeholder/

+0

これは動作しますが、パスワードフィールドでは機能しません。誰にでも解決策がありますか? –

+0

うーん、それはパスワードフィールドでは機能しません。 https://github.com/danielstocks/jQuery-Placeholder/blob/master/jquery.placeholder.js – powerbuoy

+0

実際にパスワードフィールドで動作していないので、ちょっと変わったことです。私はコードを見て、あなたが指摘しているものを見ました。うーん.... –

8

私はそれをサポートして行うもので何もしませんしません任意のブラウザにプレースホルダサポートを追加しながら、バックプラグインjqueryのを書きました。

Placeholder Plugin

関連する問題