convert html5 placeholder to a class on the input field

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<section id="fetch" class="form">
    <input type="text" placeholder="Enter title"placeholder="*" id="term" class="formField" />
  <button id="search">Find poster</button>
</section>
<section id="poster"> </section>

CSS

body {
 font-family: Arial;   
}

.form {
    padding: 1em;
    background: #ececec;
}

.formField {
 font-size: 1.1em;
 padding: 2px;    
}

.placeholder {
   color: #ff0099;  
   font-weight: normal; 
}

::-webkit-input-placeholder {
   color: #cccccc;
}

:-moz-placeholder {  
   color: #cccccc;  
}

:-ms-input-placeholder {
    color: #cccccc;
}

:focus::-webkit-input-placeholder {
    color:transparent;
}

.content {
    margin-top: 5px;
    padding: 1em;
    background: #eeeeee;     
}
.content span {
    margin-top: 5px;
    padding: 1em;
    background: red;     
}

JavaScript

// convert html5 placeholder to a class on the input field
// used with ajax movie poster example

placeholderSupport = ("placeholder" in document.createElement("input"));

if(!placeholderSupport ){
   // see if the code works when it's in here

    $('[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().parents('form').submit(function() {
        $(this).find('[placeholder]').each(function() {
            var input = $(this);
            if (input.val() == input.attr('placeholder')) {
                input.val('');
            }
        })
    });
    
}


$(document).ready(function() {

    //This is to remove the validation message if no poster image is present
    $('#term').focus(function() {
        var full = $("#poster").has("img").length ? true : false;
        if (full == false) {
            $('#poster').empty();
        }
    });

    var getPoster = function() {

        //Grab the movie title and store it in a variable
        var film = $('#term').val();

        //If the input field was empty, display a message
        if (film === '') {

            $('#poster').html("<h2>Nothing was entered.</h2>");

        } else {

            // (validated) field is not empty
            $('#poster').html("Loading");

            // the long number is the api key that you sign up for as a developer
            // MUST append "?callback = ?" to not fail call to external site  
            $.getJSON("http://api.themoviedb.org/2.1/Movie.search/en/json/23afca60ebf72f8d88cdcae2c4f31866/" + film + "?callback=?", function(json) {

                // get the json file into...