Question

I’m using a script I found online to add input prompts on an html form. I got it all working, but now the code is randomly generated a style tag that’s throwing off my css. The code is supposed to produce span tags that look like this:

<span id="input-prompt-0" class="input-prompt">Company Name</span>

For every text input field. Instead it keeps giving me this:

<span id="input-prompt-0" class="input-prompt" style="display: block;">Company Name</span>

Any ideas why?

Here’s the code:

$(document).ready(function(){
  $('input[type=text][title],input[type=password][title],textarea[title]').each(function(i){
    $(this).addClass('input-prompt-' + i);
    var promptSpan = $('<span class="input-prompt"/>');
    $(promptSpan).attr('id', 'input-prompt-' + i);
    $(promptSpan).append($(this).attr('title'));
    $(promptSpan).click(function(){
      $(this).hide();
      $('.' + $(this).attr('id')).focus();
    });
    if($(this).val() != ''){
      $(promptSpan).hide();
    }
    $(this).before(promptSpan);
    $(this).focus(function(){
      $('#input-prompt-' + i).hide();
    });
    $(this).blur(function(){
      if($(this).val() == ''){
        $('#input-prompt-' + i).show();
      }
    });
  });
});

Answer 1

The line $('#input-prompt-' + i).show(); is modifying the style. From the docs on jQuery.show:

The matched elements will be revealed immediately, with no animation.
This is roughly equivalent to calling .css(‘display’, ‘block’), except
that the display property is restored to whatever it was initially.

I guess the more prominent question is why this is “throwing off [your] css”?