Sometimes just a little to make a beautiful design page, but want to still give the user some tips on how to fill the fields. The easiest and most obvious way - to create a field with tips in the form of "default text", here are some:
Basically, all modern browsers that support the HTML5 standard and, accordingly, the attribute placeholder, which for this purpose and was coined.The problem is that if you need support for older browsers, or slightly less than older versions of Internet Explorer (which started to support this attribute only in version 10), the tip created with it, they will not see.
If you are using on your site jQuery, it is a simple and quick solution to create these fields just a few lines of code. First of all you need to create a style for "clues":
1
2
3
4
| <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><style type="text/css"></span> <style type = "text / css"></span> <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">.helpField { background:white;</span> .helpField {background: white;</span> <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">}</span> }</span> <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">.blankHelpFieldText { color: #a1a1a1;</span> .blankHelpFieldText {color: # a1a1a1;</span> <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">font-style: italic;</span> font-style: italic;</span> <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">}</span> }</span><span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"></style></span> </ style></span> |
At the same time, the first style bears the only practical purpose - to be a "feature" that will bind to the script display help text. So, instead of the background you can write what suits you best, such as width.
The second part of "voodoo" - the script show and hide our tip:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
| <script language="javascript">$(document).ready(function(){ $(".helpField").focus(function() { if ($(this).val() == $(this)[0].title) { $(this).removeClass("blankHelpFieldText"); $(this).val(""); } }); $(".helpField").blur(function() { if ($(this).val() == "") { $(this).addClass("blankHelpFieldText"); $(this).val($(this)[0].title); } }); $("#form_id").submit(function( event ) { $(".helpField").each(function(srcc) { if ($(this).val() == $(this)[0].title) { $(this).val(""); } }); }); $(".helpField").blur(); });</script> |
Importantly, do not forget to replace the id of form_id your form, and the tips of the blank fields will be sent to the server with the samba.
Well, the last bar, add fields to input necessary attributes, such as for the "Phone" in the picture is as follows:
<Input type = "text" class = "helpField" title = "+ 7 (495) 123-45-67" />
0 коммент.:
Post a Comment