使用jquery改变输入内容的形式

我想获得默认值不要离开点击，而是当用户开始键入（所以他们知道该字段是什么）....问题是以下内容：使用jquery改变输入内容的形式

当我使用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()' />

来源

2012-03-10 user1179295

我喜欢这个想法。点击某些东西很容易，变得分心，然后忘记你应该输入的内容。或忘记建议的格式（电话号码是否有破折号？）。 – DOK 2012-03-10 19:03:08

两个选项：

在HTML5中，placeholder属性将模拟你想要什么，没有所需的JavaScript。

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

第二，我相信Facebook使用的方法是将包含示例文本的背景图像替换为空白。因此，您可以创建两个背景图像（第一个包含输入所用字体中的“输入用户名”字样，第二个为空白），并将其设置为在输入焦点时翻转。

来源

2012-03-10 19:00:54 rjz

这是你在找什么：

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

FIDDLE

来源

2012-03-10 19:13:28 adeneo

下面是放置标签在输入的顶部，并需要适当的for/ID比赛，让浏览器做输入默认的焦点，当点击的方法在标签上。将标签置于输入顶部，如果模糊上的输入值没有再次显示标签。使用标签可以访问

http://jsfiddle.net/UCxaZ/2

来源

2012-03-10 19:48:50 charlietfl