Input attribute placeholder
There has already been raised the topic of using such a wonderful form attribute as placeholder. And even gave examples on js (we are looking for the word placeholder). And more than once it was disappointed, because the attribute is not executed in data IE.
The attribute itself is very useful. Particularly pleased with the space savings when creating forms (especially in pop-up forms). Therefore, it was decided not to abandon the attribute, but simply to help him declare himself and Internet Explorer. JQuery was called to help.
My shop-assistant shouted “Make a plug-in” during the creation process, but since the plug-in still needs a challenge, I decided not to bother and do it with a regular script.
The jQ solution is simple and undemanding. You can insert code anywhere (without forgetting of course about the “script” tag).
')
Make up with pleasure.
PS I have already made a remark for the color of the text in the fields, and for the fact that the attribute is used not only by text fields (type = "text"). Of course, I know about this, and probably a little later I will modify this script to a more digestible version. But when it was created the main criterion was “quickly, cheap and angry” and he coped with this task. As for the versatility of the script ... Let's do it, only a little bit later.
The attribute itself is very useful. Particularly pleased with the space savings when creating forms (especially in pop-up forms). Therefore, it was decided not to abandon the attribute, but simply to help him declare himself and Internet Explorer. JQuery was called to help.
My shop-assistant shouted “Make a plug-in” during the creation process, but since the plug-in still needs a challenge, I decided not to bother and do it with a regular script.
The jQ solution is simple and undemanding. You can insert code anywhere (without forgetting of course about the “script” tag).
')
$(document).ready(function() { /* Placeholder for IE */ if($.browser.msie) { // IE $("form").find("input[type='text']").each(function() { var tp = $(this).attr("placeholder"); $(this).attr('value',tp).css('color','#ccc'); }).focusin(function() { var val = $(this).attr('placeholder'); if($(this).val() == val) { $(this).attr('value','').css('color','#303030'); } }).focusout(function() { var val = $(this).attr('placeholder'); if($(this).val() == "") { $(this).attr('value', val).css('color','#ccc'); } }); /* Protected send form */ $("form").submit(function() { $(this).find("input[type='text']").each(function() { var val = $(this).attr('placeholder'); if($(this).val() == val) { $(this).attr('value',''); } }) }); } }); Make up with pleasure.
PS I have already made a remark for the color of the text in the fields, and for the fact that the attribute is used not only by text fields (type = "text"). Of course, I know about this, and probably a little later I will modify this script to a more digestible version. But when it was created the main criterion was “quickly, cheap and angry” and he coped with this task. As for the versatility of the script ... Let's do it, only a little bit later.
Source: https://habr.com/ru/post/148945/
All Articles