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

这就是你要找的东西：

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

FIDDLE

Answer 3

这是一种将标签置于输入顶部并需要正确for/ID匹配的方法，以允许浏览器在单击标签时执行默认的输入焦点。如果模糊上的输入值没有再次显示标签，则将标签置于输入顶部。使用标签可以访问

http://jsfiddle.net/UCxaZ/2

使用jquery在输入时更改表单的内容

3 个答案: