ホームページ > ウェブフロントエンド > jsチュートリアル > jQuery は HTML5 プレースホルダー効果を実装します。

jQuery は HTML5 プレースホルダー効果を実装します。

WBOY
リリース: 2016-05-16 16:27:59
オリジナル
1646 人が閲覧しました

HTML5 の新しいプレースホルダー属性を知っている必要がありますよね?知らなくても大丈夫です。入力ボックスにデフォルトのテキストがある場合、クリックしてデフォルトのテキストを非表示にし、フォーカスを失った後にデフォルトのテキストを表示することが必要になることがよくあります。

今日は、プレースホルダー効果をシミュレートする jQuery コードの一部を共有します。

JavaScript コード:

コードをコピーします コードは次のとおりです:

関数 placeHolder(event){
var self = $(this)、selfDataValue = self.attr("データ値")、selfValue = self.val();
if(selfDataValue){
event.type == "クリック" ? (selfValue == selfDataValue && (self.val("").css("color","#333"))) : (event.type == "blur" && (selfValue == "" && (self.val(selfDataValue).css("color","#A9A9A9"))))
}その他{
false を返します;
}
}
$(".pInputText").on("クリックぼかし",placeHolder);

HTML コード:

コードをコピーします コードは次のとおりです:


HTML5 にはそのような機能があるのに、なぜ JS を書くのかと疑問に思う人もいるかもしれません。

これはナンセンスではないでしょうか? もちろん、これは互換性の問題です。IE が HTML5 とより互換性があるとしたら、誰がこれを実装するために js を使用するでしょうか?

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート