入力入力ボックスがフォーカスを獲得または失ったときにテキストを非表示/表示する (jquery バージョン)_jquery

入力ボックスは、フォーカスを獲得したときと失ったときにテキストを非表示または表示します。
入力ボックスのデフォルトの状態を見てみましょう:

入力ボックスはフォーカス状態を取得します。 :

レンダリングで検索入力ボックスが表示されます。入力ボックスがフォーカスされると、プロンプト「ユーザー名/メール」が自動的にクリアされ、ユーザーの入力を待ちます。ユーザーが何も入力しないと、入力ボックスから離れると、入力ボックスに「ユーザー名/メールアドレス」というプロンプトが再び表示されます。それはとても一般的なことでしょうか？多くの検索、ログイン、フォームでこの効果が使用されますが、多くの Web サイトを調べたところ、その 90% 以上が次の方法で実装されています:

コードをコピー コードは次のとおりです。

私は JavaScript を書くことに大反対ですin html タグ内では html タグ内の書き方と同じですが、W3C の規格には違反しませんが、このような書き方は推奨しません。理由:
1. 多数の入力ボックスがあり、それぞれにそのような効果が必要な場合、それぞれをこのように扱う必要がありますか?
2. プロンプトのテキストを変更したい場合、時間と労力がかかり、保守が困難です。
3. 構造 (html)、パフォーマンス (css)、および動作 (javascript) の分離を推奨します。
では、HTML に js を記述することなく、再利用可能で保守が容易なこの効果を実現するには、どのように記述すればよいでしょうか?
具体的な方法は次のとおりです:
まず jQuery を導入する必要があります
HTML コード:

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

jQuery コード:

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

にクラス「input_test」を追加することで簡単に実装できます。実装された入力ボックス
表示: デモ