HelpInput plugin (my bike)

Hello. The other day, the task arose of arranging mini-hints in the input fields on one project (just as the “site search” field is designed, which you can see in the upper right corner of Habra). The project on which it was necessary to arrange the fields was written using jQuery, so I decided to use the plugin for this library. I ran through the ready-made solutions and did not find me completely satisfied. I decided to make my bike. In my opinion, it turned out quite well, although during the development process I repeatedly ran into reefs. Because of the meager choice of plug-ins that solve this problem, I decided to put my “creation” on Habra. The need to design the fields in this way is common, perhaps someone will come in handy.

UPD: During the discussions, a couple of practical ideas were proposed, which I implemented:
1. It is processed not only Tab, but also Shift + Tab
2. The plugin learned how to work with autocomplete (if you need to disable this feature, set the autoComplete key to false during initialization)
3. The names of the keys have changed (they have acquired a meaning that is understandable not only to me)


Before you download the source code, I’ll tell you about the advantages of the plugin:
1. Even if the visitor has js disabled, the hints will be visible and the design will not “go” (you can see in the drawing how it works with js turned off and on).
2. The plugin can handle pressing the Tab button (now Shift + Tab). The cursor will move to the object with the next tabindex, and reaching the last object, the cursor jumps to the first (in my case it was one of the main conditions)
3. Tips work correctly with fields of the type password (there are plug-ins that display text in dots).
4. The plugin can “bypass” hidden fields (often, some of the fields are hidden from the user and appear only under certain conditions)
5. Due to the classes assigned to the objects, you can flexibly change the visual design.
6. The plugin turned out light, just 1kb.
')
Here is the plugin script itself:
- jquery.helpInput.js

Keys of parameters that can be passed to the plugin:
- 'autoComplete' - support for autocomplete fields
- 'dummyClass' - the class of the image tag that overlaps the input (default: 'divInput')
- 'selectedTextFileClass' - the class of the selected object of type text or password (default: 'selectedInput')
- 'selectedAnotherFileClass' - class of selected object of another type (default: 'selectedAnother')

The principle of the plug-in is not difficult to understand by code, but for those who are too lazy to look into the code I will briefly tell you:
1. It is necessary to register tabindex in the form for all input and textarea elements (sets the sequence by jumping the cursor by pressing the Tab button).
2. Set the elements of the class that describes the appearance.
3. Under the elements of the form of the type text and password, you must place the text of prompts, framed by any tag.

It should be something like:

<input type="text" name="login" tabindex="1" class="input" /> <div class="help"> 3  12 </div> 

4. Initialize the plugin:

 $("form").helpInput(); 

That's all. Feel free to make suggestions for improvement and describe bugs. I hope not knowingly designed the article and someone it is useful.