jQuery placeholderプラグインはIEにもplaceholder属性をサポートさせる
2233 ワード
jQuery placeholderプラグインはIEにもplaceholder属性をサポートさせる
ケース:検索ボックス全体で、デフォルトのプレースホルダが「キーワードを入力してください」である必要があります.フォーカスを取得すると、プレースホルダが消えたり使用できなくなり(正常な入力に影響しません)、フォーカスが失われた後、ユーザーがコンテンツ入力がなければ、プレースホルダが引き続き現れ、プレースホルダが引き続き表示されます.このコードはフロントエンドで簡単に書けると思いますが、HTML 5にはもともとこの「placeholder」属性があり、効果は上記のケースの説明と同じです(各サポートされているブラウザの内部表現は一致しないかもしれませんが、役割は一致しています).では、この属性はどのようにしてすべての現代ブラウザをサポートするように優雅に格下げされますか?答えはやはりスクリプトであるJavaScriptです.
スクリプトにより、ブラウザが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,
})
}