dynamical placeholders from input id

dynamical placeholders (ex:`2013`) generated from the input's id (ex:`<input type="text" id="year-2013" name="year-2013">`), and formatting different from the input's default style (ex:`{'font-size':'10px', 'text-align':'right'}`).

by eapo

HTML

<fieldset id="webform-component-merleg--forgoeszkozok" class="webform-component-fieldset">
    <legend>Forgóeszközök</legend>
    <div id="webform-component-merleg--forgoeszkozok--keszletek-2010"
    class="webform-component webform-component-textfield webform-container-inline">
        <div id="edit-submitted-merleg-forgoeszkozok-keszletek-2010-wrapper" class="form-item">
            <label for="edit-submitted-merleg-forgoeszkozok-keszletek-2010">Készletek:</label>
            <input type="text" class="form-text" value="" size="15"
            id="edit-submitted-merleg-forgoeszkozok-keszletek-2010" name="submitted[merleg][forgoeszkozok][keszletek_2010]"
            maxlength="128">
        </div>
    </div>
    <div id="webform-component-merleg--forgoeszkozok--keszletek-2011" class="webform-component webform-component-textfield">
        <div id="edit-submitted-merleg-forgoeszkozok-keszletek-2011-wrapper" class="form-item">
            <input type="text" class="form-text" value="" size="15" id="edit-submitted-merleg-forgoeszkozok-keszletek-2011"
            name="submitted[merleg][forgoeszkozok][keszletek_2011]" maxlength="128">
        </div>
    </div>
    <div id="webform-component-merleg--forgoeszkozok--keszletek-2012" class="webform-component webform-component-textfield">
        <div id="edit-submitted-merleg-forgoeszkozok-keszletek-2012-wrapper" class="form-item">
            <input type="text" class="form-text" value="" size="15" id="edit-submitted-merleg-forgoeszkozok-keszletek-2012"
            name="submitted[merleg][forgoeszkozok][keszletek_2012]" maxlength="128">
        </div>
    </div>
    <div id="webform-component-merleg--forgoeszkozok--keszletek-2013" class="webform-component webform-component-textfield">
        <div id="edit-submitted-merleg-forgoeszkozok-keszletek-2013-wrapper" class="form-item">
            <input type="text" class="form-text" value="" size="15" id="edit-submitted-merleg-forgoeszkozok-keszletek-2013"
           ...

CSS

input {
    margin: 0;
    width: 113px;
    height: 19px;
}

JavaScript

$('input').attr('placeholder', function () {
        return $(this).attr('id').match(/\d{4}/g)
    }).css({
        'font-size': '10px',
        'text-align': 'center'
    }).focus(function () {
        $(this).removeAttr("placeholder").css({
            'font-size': '1em',
            'text-align': 'left'
        })
    }).blur(function () {
        if ($(this).val() == "") {
            $(this).attr('placeholder', $(this).attr('id').match(/\d{4}/g)).css({
                'font-size': '10px',
                'text-align': 'center'
            })
        }
    });