Temporarily Change Placeholder in HTML for specified time

Question

I was examining another stack overflow page and discovered that it almost solved my issue of how to temporarily change the placeholder text of my search (input) box, but it doesn't revert the changes to the original text after a specified time. I want it so that after the highlighting has finished its 3 second (3000) appearance/fade, the placeholder text also reverts to the original.

Original placeholder was Search By Number

Code is as follows:

$(document).ready(function(){
    if ($("input").val() == "") {
        $("button").click(function(event) {
            $("input").attr("placeholder","Enter Account Number.");
            $("input").effect("highlight",{color:"#D46A6A"},3000);
            event.preventDefault(); 
        });
    }
});

I tried putting 3000 after "Enter Account Number", so that it looked like $("input").attr("placeholder","Enter Account Number.",3000);, but that did not work.

Thanks!

score 2 · Answer 1 · answered Aug 28 '14 at 19:56

2

Use animation complete callback function. Something like this

$("input").effect("highlight", {color:"#D46A6A"}, 3000, function() {
    $(this).attr("placeholder","Enter Account Number.");
});

Update by Roko C. Buljan's comment.

answered Aug 28 '14 at 19:56

Boris Šuška

1,796
20
32

2

You can use `$(this)` inside the callback. It's faster than iterating all over *input* selectors again. – Roko C. Buljan Aug 28 '14 at 19:57

Roko C. Buljan · Accepted Answer · 2014-08-28T20:36:52.703

Well actually it should look like this: http://jsbin.com/lonun/2/edit

$(function() { // DOM ready shorthand

  var $inp = $('#accNumber'),             // Cache your elements
      pHolder = $inp.prop('placeholder'), // Remember the default placeh.
      $btn = $('#submitNumber');          // Cache your elements


  $btn.click(function( ev ) {

      ev.preventDefault(); 

      if( !$.trim($inp.val()) ) {         // THE 'if' GOES INSIDE THE CLICK fn!
        $inp
          .val("")        // Also!: Reset value if i.e <space> was used
          .prop('placeholder', "We need it!")        // WARN USER
          .effect("highlight",{color:"#D46A6A"}, 3000, function(){
                $inp.prop('placeholder', pHolder);   // RESTORE ORIG.
          });        
      }

  });

});

AS you can see from the code above I used ID for the needed elements, so the HTML might probably look similar to:

<input id="accNumber" type="text" placeholder="Acc. number"> 
<button id="submitNumber">DONE</button>

Really picky, but you don't need to cache `$btn`, as you only use it once. — Matt, Aug 28 '14 at 20:34

wolffer-east · Answer 3 · 2014-08-28T20:07:40.320

1

You can use a setTimeout if you would like

for example:

$(document).ready(function(){
    if ($("input").val() == "") {
        $("button").click(function(event) {
            var tempPlaceholder = $("input").attr("placeholder");
            setTimeout(function(){
                $("input").attr("placeholder", tempPlaceholder);
            }, 3000);
            $("input").attr("placeholder","Enter Account Number.");
            $("input").effect("highlight",{color:"#D46A6A"});
            event.preventDefault(); 
        });
    }
});

This will reset the input's placeholder to it's original text after 3 seconds.

edited Aug 28 '14 at 20:07

answered Aug 28 '14 at 20:00

wolffer-east

1,069
7
14

The second and third line make no sense to me. What's the reason for having a `click function` inside an `if $('input').val(...` Also just having `$("input")` is an issue caller. – Roko C. Buljan Aug 28 '14 at 20:03
I didnt look at his code as much as I should have, you are correct that doesnt make that much sense. I just dropped the setTimeout where it would have belonged if the rest of the code was valid :). Looks like that `if` could be dropped, and as you mentioned the input selector needs a class or preferably an id – wolffer-east Aug 28 '14 at 20:05
Have you tested your solution? I don't think that after setting `attr` some magic should happen once the setTimeout ends. It will just blindly re-set that same `attr`. – Roko C. Buljan Aug 28 '14 at 20:05
Yes, also if you plan to reuse the same selector, might be a nice idea to cache it first. – Roko C. Buljan Aug 28 '14 at 20:06
I updated to make sure the placeholder is saved. On the subject of the selector, while it isnt good practice to not target in a more specific manner it is what was in the code. It could well work on the page in question if there is only 1 input on the page. – wolffer-east Aug 28 '14 at 20:09
Nice, I answered with all the needed stuff to actually make it work. – Roko C. Buljan Aug 28 '14 at 20:31

Temporarily Change Placeholder in HTML for specified time

3 Answers3