6

Webアプリケーションで属性を使用しようとしていplaceholder="xxx"ますが、IE9用の特別なビジュアルは必要ありません。IE9でこの機能を実現するための良い提案を投げかけることはできますか？

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

ありがとう。

編集-パスワード入力フィールドで機能するためにもこれが必要です。

// 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();
        });
    }
}
}
4

3 に答える 3

12

同じことを調べました。いくつかの小さな変更を加えた後、AaronMcCallによってこの要点を再利用することにしました。主な利点は、コードがシンプルで理解しやすいことです。

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

  2. var前に追加しtestます。

をサポートするブラウザplaceholderの場合、それは単にそれにフォールバックします。delegateまた、既存のフォームの新しい入力要素（の使用に注意）も処理します。ただし、動的な新しいフォーム要素は処理しません。おそらく、を使用して変更することができますjQuery.on。

これが気に入らない場合は、ここにあるものの1つを使用できます。ただし、それらのいくつかは複雑すぎるか、setTimeout新しい要素を検出するなどの疑わしい設計上の決定があります。

匿名関数を呼び出してから、返された関数を呼び出すため、2組の親を使用する必要があることに注意してください（これは別の方法で因数分解される可能性があります）。

(function () {
  // ...
})()();
于 2012-07-03T02:39:26.577 に答える
8

私はしばらく前にjqueryプラグインを作成しました。これは、プレースホルダーサポートをサポートしていないブラウザーにプレースホルダーサポートを追加し、サポートしているブラウザーでは何もしません。

プレースホルダープラグイン

于 2013-01-22T15:16:45.790 に答える
2

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

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

于 2012-07-03T03:26:58.340 に答える