CODEWITHSUNDEEP
jqueryformsplaceholder
Klingstedt
Klingstedt

Reputation: 105

replacing placeholder with jquery

I am creating a solution to the placeholder issue to make it work in every browser using only jquery.

Its working good up until now... This is how far i've come

var formId = ["Name", "E-mail", "Subject", "Message"];
$.each(formId, function(i) {
    $("input, textarea").focus(function() {
        if ($(this).val() === formId[i])
            $(this).val("");
    }).focusout(function() {
        if ($(this).val() === "")
            $(this).val(formId[i]);
    });
});

Its working perfectly up until the focus out part. When i focus out the input field, it repopulates the value with Name in every input field.. Have tried my way with different solutions but this is as close i've gotten.. Any one got any idea?

Upvotes: 0

Views: 508

Answers (2)

bozdoz
bozdoz

Reputation: 12860

This doesn't seem to be the best way to tackle this problem. I saw a solution like the following on a blog before. You add the placeholder attribute to the inputs, so they will work on modern browsers, and you add jQuery to inputs with placeholder attributes, like [placeholder]:

$('[placeholder]').focus(function() {
  var input = $(this);
  if (input.val() == input.attr('placeholder')) {
    input.val('');
    input.removeClass('placeholder');
  }
}).blur(function() {
  var input = $(this);
  if (input.val() == '' || input.val() == input.attr('placeholder')) {
    input.addClass('placeholder');
    input.val(input.attr('placeholder'));
  }
}).blur();

$('[placeholder]').parents('form').submit(function() {
  $(this).find('[placeholder]').each(function() {
    var input = $(this);
    if (input.val() == input.attr('placeholder')) {
      input.val('');
    }
  })
});

I can't find the blog right now, which is a shame, because this code, I believe, is completely copied from that site and works great, cross-browser.

How this works, and why this is a better approach:

Instead of putting handlers on every input and textarea element, you can easily filter exactly which ones should have handlers on them: those that have a placeholder attribute.

A .submit() handler will keep the default text from being posted as values.

Maybe I should speak on what I feel are problems with your code:

You're using an each function to call multiple focus handlers, which are quite similar. You probably don't need the each function. You could just use $('input, textarea').focus() because that will add a handler to each input. Then, you could check if $.inArray($(this).val(),formId). Docs for inArray().

Upvotes: 1

mikakun
mikakun

Reputation: 2265

forget about var formId, instead add an attribute data-placeholder in your input/textarea html tag with the appropriate values, then :

 $("input, textarea").on({
    focus : function() {
      var $t=$(this);
      if ($t.val() ===$t.data("placeholder"))
        $t.val("");
    }, 
    blur : function() {
      var $t=$(this);
      if ($t.val() === "")
        $t.val($t.data("placeholder"));
    }
});

Upvotes: 0

Related Questions