Question

I have some jQuery that provides a placeholder as long as my <label for=""> matches the input name and ID. However, that’s not the case so I’ve decided to just use a <span> for the placeholder instead. Can someone help alter my jQuery to make the <span> class “holder” I’m using work? The goal is to have the placeholder stay on focus, disappear when input exists, then reappear if the input disappears.

Here’s the HTML I’m using:

<div id="placeholder">
  <span class="holder">This is the placeholder...</span>
  <%= f.text_area :body, :id =>"Placeholder" %>
</div>

And my current jQuery:

$(document).ready(function() {
    $('textarea').keyup(function() {
        if ($(this).val().length) {
            $('label[for="' + $(this).attr('name') + '"]').hide();
        } else {
            $('label[for="' + $(this).attr('name') + '"]').show();
        }
    });
});

Thanks!

Answer 1

Something like this should work:

$(function() {
    $("span.holder + textarea").keyup(function() {
        if($(this).val().length) {
            $(this).prev('span.holder').hide();
        } else {
            $(this).prev('span.holder').show();
        }
    });        
});

This should work for all textareas on page if they have span.holder preceding them.