How to blink the place holder on focusout in an input textfield

Question

I want to blink the placeholder text on focus out .

This is my html code:

<input type="text" id="keyfob" class="customform col-sm-12 text-red" data-required='true' placeholder=" Please click here to Key Fob scanning work">

this is my jquery code:

$('#keyfob').on("focus blur", function(){
    $(this).attr("placeholder") == "" ? $(this).attr("placeholder", "Please click here for Key Fob scanning to work") : $(this).attr("placeholder", "");
});

working js fiddle code

now i want to blink the placeholder text "Please click here to Key Fob scanning work".

So please can anyone help me ???

score 0 · Answer 1 · answered Feb 12 '15 at 08:53

0

here's jquery

function blink() {

if ($('input[type=text]').attr('placeholder')) {
 // get the placeholder text
 $('input[type=text]').attr('placeholder', '');
} 
else {
  $('input[type=text]').attr('placeholder', 'Placeholder Text...');
}
setTimeout(blink, 1000);
}

html

<body onload='blink()'>
<input type="text" on-click='blink()' id="keyfob" class="customform col-sm-12 text-red" data-required='true' placeholder=" Please click here to Key Fob scanning work">

answered Feb 12 '15 at 08:53

Rkn

122
2
11

Can u send me working of it in js fiddle,here it is not blinking for me – Bhairav Feb 12 '15 at 08:57
hey onfocus also its blinking bro ..i want to blink it only on focusout bro – Bhairav Feb 12 '15 at 09:47

Pioter · Answer 2 · 2015-02-12T12:29:09.043

Are you looking something like this:

  <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        var clicked;
        $('#keyfob').focusout(function() {
            var s = $('#keyfob').attr("placeholder");
            clicked=true;
            blinking();    
        });
        $('#keyfob').click(function() {
            clicked=false;
            $('#keyfob').attr("placeholder", '');
        });
        function blinking() {
               if(clicked){
                     $('#keyfob').attr("placeholder", '');
                setTimeout(function() {
                    $('#keyfob').attr("placeholder", 'Please click here to Key Fob scanning work');
                    setTimeout(blinking, 500);
                }, 1000);
            }
        }
      });
   </script>

  </head>

    <body>
         <input type="text" id="keyfob" class="customform col-sm-12 text-red" data-required='true' placeholder="Please click here to Key Fob scanning work">
   </body>
 </html>

thanxs for responding. can u create a jsfiddle for above code,because it is not working for me — Bhairav, Feb 12 '15 at 11:13
still the cursor and placeholder both are blinking @dileep i dont want blink both of them — Bhairav, Feb 12 '15 at 11:16
Onfocus the placeholder text should be hide and onfocusout the placeholder text should be seen with the blinking effect. — Bhairav, Feb 12 '15 at 11:24

score 0 · Answer 3 · edited May 23 '17 at 11:43

0

See this thread that shows how it can be done with plain CSS only, without any JavaScript / jQuery.

Special credit for @Pinal who helped me to make it work on Firefox.

edited May 23 '17 at 11:43

Community

1
1

answered Feb 12 '15 at 12:29

Alexander Dayan

2,846
1
17
30

How to blink the place holder on focusout in an input textfield

3 Answers3