CODEWITHSUNDEEP
jquerycssplaceholder
Multi stack
Multi stack

Reputation: 321

Show/Hide placeholder text

I have several textboxes with placeholders described for example:

<input class="form-control" id="txtAddress" placeholder="Address" type="text">
<input class="form-control" id="txtZip" placeholder="Zip Code" type="text">

I want to hide these placeholders when I call the SetErrorStateForControl function. 

var SetErrorStateForControl = function (elemObj, msg) 
{
    $('<span class="reqDiv" name="Required">' + msg + '</span>').prependTo(elemObj.closest('div'));
    //hide placeholders of all textboxes
}

and on focus I want to put the placeholders back. 

$("#Offer_Form").find(".form-control").on("focus", function (e) {
        //Show placeholders back
    });

Is it even possible to hide and show placeholders with jquery OR css?

Upvotes: 0

Views: 20052

Answers (4)

dev-arruda
dev-arruda

Reputation: 1

Try this.

$("input").each(
            function(){
                $(this).data('holder',$(this).attr('placeholder'));
                $(this).focusin(function(){
                    $(this).attr('placeholder','');
                });
                $(this).focusout(function(){
                    $(this).attr('placeholder',$(this).data('holder'));
                });
                
        });
li{padding:15px;list-style-type: none;}
input{padding:8px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
    <ul class="field-set field-set-stacked">
       <li class="field field-text">
           <input type="text" placeholder="Enter your name" />
       </li>
       <li class="field">
           <input type="text" placeholder="Enter your email address" />
       </li>
       <li class="field">
           <input type="text" placeholder="Enter amount" />
       </li>
    </ul>                  
</form>

Upvotes: 0

Germano Plebani
Germano Plebani

Reputation: 3655

<input type="text" placeholder="enter your text" onfocus="this.placeholder = ''" onblur="this.placeholder = 'enter your text'" />

Upvotes: 3

Punit Gajjar
Punit Gajjar

Reputation: 4997

Check this .

It might helps you to understand.

<!DOCTYPE html>
<html lang="en">
    <head>
      <meta charset="utf-8">
      <title>Place Holder</title>
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    </head>
    <body>
        <div id=Offer_Form>
            <input class="form-control MyClass" id="txtAddress" placeholder="Address" type="text">
            <input class="form-control MyClass" id="txtZip" placeholder="Zip Code" type="text">    
        </div>
    <script type="text/javascript">


        $(document).on("focus" , ".MyClass" , function () {

            $(this).removeAttr('placeholder');

        });

        $(document).on("focusout" , ".MyClass" , function () {

            if($(this).val() == ''){
                $(this).attr('placeholder' , "My PlaceHolder");
            }

        });

    </script>

    </body>
</html>

Upvotes: 2

Muthu Sundar Arumugavelu
Muthu Sundar Arumugavelu

Reputation: 149

HTML:

<input type="text" name="name" placeholder="Enter Text" id="txt1" />

jQuery:

$('#txt1').focus(function(){
  $(this).attr('placeholder','');
});
$('#txt1').focusout(function(){
  $(this).attr('placeholder','Enter Text');
});

Upvotes: 3

Related Questions