Geek Answers Handbook

HTML constant workaround

I use placeholders for input fields in my application and a jquery workaround for browsers that don't support placeholders. However, in most browsers, the placeholder disappears when the input is in focus, even if it is empty. One way is to use transparent bg in the input field and place the range with text directly behind the input field and change bg to opaque as soon as something has been entered. The problem is that my application now has over 3,000 input fields. Is it possible to do this through the jquery plugin at runtime? or I'm open to a better offer. Please, help.

0
source share
3 answers

This is what I wrote and use:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <style> body{ background-color:#DDD; } span.placeholder { background-color:#FFF; color:#777; border-radius: 4px 4px 4px 4px; margin: 5px 0; padding: 9px 0 8px 13px; width: 297px; } input { border: 1px solid #707A68; border-radius: 4px 4px 4px 4px; margin: 5px 0; padding: 10px; width: 310px; background:transparent; } </style> <body> <div> <input type="text" placeholder="hello" name="hh"/> </div> </body> <script> $('input').each(function(){ var txt = $(this).attr('placeholder'); var name = $(this).attr('name'); var node = $("<span class='placeholder'>"+txt+"</span>").appendTo($(this).parent()); $(this).before(node); node.css('position','absolute'); node.css('z-index','-1'); node.css('display','block'); $(this).attr('placeholder',''); }); $('input').bind('keyup',function(){ if($(this).val()=="") $(this).css('background','transparent'); else $(this).css('background','#FFF'); }); </script>
0
source

Do you have 3,000 input fields on one page? In this case, you need to redesign your application somehow.

If you have another group of inputs on several pages and you want the plugin to automatically launch placeholders when necessary, there are some good plugins for this. Here is a comprehensive list of polyfills - just find the heading "Web Forms: input placeholder". https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

Most of them do not have to be specifically called for each instance, so you should not change 3000 lines of code. :)

+1
source

I would use the attr value, and the logic would look like this.

 var input = document.createElement('input'); if(! ('placeholder' in input)) { $("input[placeholder]").focus(/* clear value if it is equals placeholder */); $("input[placeholder]").blur(/* assign placeholder if it is "" */); $("input[placeholder]").each(/* assign placeholder if value equals "" */) }

You can also change the style (or class) of the inputs in focus and blur to make it look more like a placeholder.

0
source

More articles:


All Articles