Posted by : Chris London in (Programming, Scripts, Web Tricks)
Input Field Hinting
Tagged Under : hints, input fields, javascript, jquery, Programming
This will show you how to include the Kwista Hint script which will allow you to generate automatic hints in your form’s input fields. Automatic hints, by our definition, are input fields that contain predefined text in the field that provide the user with a hint as to what should be typed in the field. These hints are usually gray, though the colors and font styles can be changed through CSS. When the user focuses on the field (e.g., they click on it) the hint text is removed and the style of the text goes back to normal. If the user doesn’t type anything in the field, or they erase what they type, and they click away from the field then the hint text is returned to the field.
What Makes Ours Unique:
Unlike most hinting scripts you may find on the web our handles password fields! The script replaces the password field with a text input field and shows the hint. When the user focuses on (clicks on) the input field it is replaced by a password field.
Requirements:
jQuery (tested on jQuery v1.3.1)
You can include jQuery on your site in one of two ways.
1) Hosting locally — This is recommended as it guarantees the file will be available and is the quickest for most clients. To host locally you need to download the latest version of jQuery from: http://docs.jquery.com/Downloading_jQuery and upload it to your server. Then include the following code in the <head> section of your html file replacing the link to the name of your jQuery file:
<script src="/path/to/jquery.js"></script>
2) Hosting remotely — This is another option though it has the potential for problems. This option means you let Google host the jQuery file and every time a visitor comes to your site their computer goes to Google and downloads the Javascript directly. At some point Google may block this type of linking or they may remove jQuery all together. All you do is include the following code in the <head> section of your html file:
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js"></script>
How To Install:
1) Download kwhint.js
2) Upload kwhint.js to your server
3) Include the following in the <head> section of your html file and change /path/to/ to the actual location of where you uploaded the file:
<script src="/path/to/kwhint.js"></script>
4) Add a hint="Your hint text here" to the input fields you want hints for and replace “Your hint text here” with the hint you want to show up.
5) Add appropriate styles to make it look better. It uses the classes “kwHinted” and “kwUnhinted”. You can use these styles if you want:
.kwUnhinted {
color: #000;
}
.kwHinted {
color: #999;
}
Example:
<input type="text" name="username" hint="Your Username" />
This will show an input field with “Your Username” as a hint
