Home/ Questions/Q 8291555
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T13:10:09+00:00

I am using placeholders for input boxes in my application and a jquery workaround

  • 0

I am using placeholders for input boxes in my application and a jquery workaround for browsers that do not support placeholders. However in most browsers the placeholder disappears when the input is in focus even though it is empty. One workaround is to use a transparent bg on the input field and put a span with the text directly behind the input field and change the bg to opaque once something has been typed in. The problem is that my application now has over 3000 input fields. Is this possible to do this via a jquery plugin in run time? or I am open to a better suggestion. Please help.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is what i wrote and am using:

        <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