jQuery placeholderプラグインはIEにもplaceholder属性をサポートさせる

2233 ワード

jQuery placeholderプラグインはIEにもplaceholder属性をサポートさせる
ケース:検索ボックス全体で、デフォルトのプレースホルダが「キーワードを入力してください」である必要があります.フォーカスを取得すると、プレースホルダが消えたり使用できなくなり(正常な入力に影響しません)、フォーカスが失われた後、ユーザーがコンテンツ入力がなければ、プレースホルダが引き続き現れ、プレースホルダが引き続き表示されます.このコードはフロントエンドで簡単に書けると思いますが、HTML 5にはもともとこの「placeholder」属性があり、効果は上記のケースの説明と同じです(各サポートされているブラウザの内部表現は一致しないかもしれませんが、役割は一致しています).では、この属性はどのようにしてすべての現代ブラウザをサポートするように優雅に格下げされますか?答えはやはりスクリプトであるJavaScriptです.
;(function ($) {
    $.fn.extend({
        placeholder : function () {
            if ("placeholder" in document.createElement("input")) {
                return this //      placeholder  ,       
            } else {
                return this.each(function () {
                    var _this = $(this);
                    _this.val(_this.attr("placeholder")).focus(function () {
                        if (_this.val() === _this.attr("placeholder")) {
                            _this.val("")
                        }
                    }).blur(function () {
                        if (_this.val().length === 0) {
                            _this.val(_this.attr("placeholder"))
                        }
                    })
                })
            }
        }
    })
})(jQuery);

スクリプトにより、ブラウザがplaceholderプロパティをサポートしているかどうかを判断し、このスクリプトを動的にロードします.
if(!"placeholder" in document.createElement("input")){
    $.getScript("jquery.placeholder.js",function(){
        $("#keyword").placeholder();// id=keyword     placeholder,         
    })
}