こんにちは。 先日、入力フィールドの1つのプロジェクトにミニヒントを発行するタスクがありました（ 「サイト検索」フィールドのフレームに似ており、Habraの右上隅に表示されます）。 フィールドの配置が必要なプロジェクトはjQueryを使用して作成されたため、このライブラリにプラグインを使用することにしました。 既成のソリューションを駆使しましたが、完全に満足することはできませんでした。 私は自転車を作ることにしました。 私の意見では、開発プロセス中に何度も落とし穴に遭遇しましたが、悪くはないことが判明しました。 この問題を解決するプラグインの選択が少ないため、「作成」をHabraに置くことにしました。 このようにフィールドを設計する必要性はしばしば出くわし、誰かが役に立つかもしれません。
UPD：議論の中で、いくつかの実用的なアイデアが提案されました。
1.タブが処理されるだけでなく、Shift + Tabも処理されます
2.プラグインはオートコンプリートを使用することを学びました（この機能を無効にする必要がある場合は、初期化中にautoCompleteキーをfalseに設定してください）
3.キーの名前が変更された（私だけでなく理解可能なセマンティックロードを取得した）
ソースを詰める前に、プラグインの利点について説明します。
1.訪問者のjsが無効になっている場合でも、プロンプトは表示され、デザインは「進行」しません（写真では、jsをオフおよびオンにした場合の動作を確認できます）。
2.プラグインは、Tabボタン（現在はShift + Tab）を押すことができます。 カーソルは次のtabindexを持つオブジェクトにジャンプし、最後のオブジェクトに到達すると、カーソルは最初のオブジェクトにジャンプします（私の場合、これは主な条件の1つでした）
3.ヒントは、パスワードなどのフィールドで正しく機能します（テキストをドットで表示するプラグインがあります）。
4.プラグインは非表示フィールドを「バイパス」できます（多くの場合、フィールドの一部はユーザーから非表示になり、特定の条件下でのみ表示されます）
5.オブジェクトに割り当てられたクラスにより、視覚的なデザインを柔軟に変更できます。
6.プラグインは軽量で、わずか1 KBです。
プラグインスクリプト自体は次のとおりです。
-jquery.helpInput.js
プラグインに渡すことができるパラメーターのキー：
-'autoComplete'-オートコンプリートフィールドのサポート
-'dummyClass'-入力をオーバーライドするダミータグクラス（デフォルト： 'divInput'）
-'selectedTextFileClass'-タイプテキストまたはパスワードの選択されたオブジェクトのクラス（デフォルト： 'selectedInput'）
-'selectedAnotherFileClass'-異なるタイプの選択されたオブジェクトのクラス（デフォルト： 'selectedAnother'）
プラグインの原理はコードによって理解するのは難しくありませんが、コードを調べるのが面倒な人のために、簡単に説明します。
1.フォームでは、すべてのinputおよびtextarea要素がtabindexを登録する必要があります（Tabボタンを押してカーソルをジャンプしてシーケンスを設定します）。
2.要素を外観を記述するクラスに設定します。
3.テキストやパスワードなどのフォーム要素の下に、任意のタグで囲まれたプロンプトのテキストを配置する必要があります。
次のようなものが得られるはずです。
<input type="text" name="login" tabindex="1" class="input" /> <div class="help"> 3 12 </div>
4.プラグインを初期化します。
$("form").helpInput();
それだけです。 改善のための提案を提供し、バグを説明してください。 記事を書いたことが無駄にならず、誰かに役立つことを願っています。