используя jquery для изменения содержимого формы при наборе

Question

Я пытаюсь получить значение по умолчанию, чтобы оно не исчезало при щелчке, а когда пользователь начинает печатать (чтобы они знали, для чего это поле) .... проблема в следующем:

когда я использую onchange вместо onfocus, он сохраняет значение по умолчанию, когда они начинают печатать.Если это сбивает с толку то, что я делаю, зайдите на Facebook и посмотрите, как работает их окно поиска ... это то, к чему я стремлюсь.

<script>

    function uFocus() {
        $('#fakeusername').hide();
        $('#username').show();
        $('#username').focus();
    }

    function uBlur() {
        if ($('#username').attr('value') == '') {
            $('#username').hide();
            $('#fakeusername').show();
        }
    }
</script>
<input style='width:202px;height:25px;margin-top:8px;font-size:14px;color:gray;' type='text'  name='fakeusername' id='fakeusername' value='  Username' onfocus='uFocus()' />
<input style='width:202px;height:25px;margin-top:8px;font-size:14px;color:#000000;display: none' type='text' name='username' id='username' value='' onblur='uBlur()' />

Answer 1

Два варианта:

В HTML5 атрибут placeholder будет имитировать то, что вы хотите, без необходимости использования Javascript.

<input type='text'  name='fakeusername' id='fakeusername' value='Username' placeholder='Type your username' />

Второй, и я считаю, что подход, используемый Facebook, чтобы заменить фоновое изображение, содержащее образец текста, на пустое.Таким образом, вы можете создать два фоновых изображения (первое, содержащее слова «Введите ваше имя пользователя» в шрифте, используемом для ввода, второе - пустое) и настроить их на переворачивание, когда фокус ввода сфокусирован.

Answer 2

Вот метод, который помещает метку поверх ввода и требует соответствующего for/ID соответствия, чтобы браузер мог делать фокус ввода по умолчанию при нажатии на метку. Помещает метку поверх ввода, если никакое значение ввода на размытии не покажет метку снова. Использование ярлыка делает его доступным

http://jsfiddle.net/UCxaZ/2

Answer 3

Это то, что вы ищете:

$("#fakeusername").on({
    focus: function() {
        $(this).css('color', '#000');
    },
    blur: function() {
        $(this).css('color', 'grey');
    },
    keydown: function() {
        if ($(this).val()=='  Username') {
            $(this).val('');
        }
    }
});

FIDDLE