Clear and Reset Input Text on Focus

by Tyler N.

HTML

<input class="search-bar" placeholder="searchy" />
<button>Submit</button>

JavaScript

$(function () {
    // clearing and resetting placeholder text on focus
    $('.search-bar').focus(function () {
        if ($(this).attr('placeholder') == 'searchy') {
            $('.search-bar').attr('placeholder', '').val('');
        }
    });
    $('.search-bar').blur(function () {
        if ($(this).val().trim().length === 0) {
            $('.search-bar').val('').attr('placeholder', 'searchy');
        }
    });

    $('button').click(function () {
        alert($('.search-bar').val());
    });
});