javascript - 文本作为文本框输入的占位符？

Question

我注意到在某些网站上，例如 http://academia.edu/ ，注册表单在其文本输入字段中有一些“占位符”。这样一来，在文本框中，文本框内没有标签，只有一个字体很小的“名字”字样。

当使用 Firebug 进行调查时，我看到以下代码:

<input class="standard_text magic-default magic-default-on" id="user_first_name" name="user[first_name]" size="30" type="text" value="First Name">

看起来幕后发生了一些“神奇”的 javascript。但由于我还不熟悉 javascript 调试，所以我还无法追踪他们是如何做到这一点的。

有谁知道如何产生这种效果？

Answer 1

对于现代浏览器，您可以使用 HTML5 placeholder 属性。

这将在没有任何 Javascript 的情况下实现您想要的结果，并且将在旧浏览器中扩展(不会执行任何操作)。

<input placeholder="First Name">

要使它在旧浏览器中工作，您可以包含一些 jQuery:

$('input:text').focus(function(){
    if ( $( this ).val () === $( this ).attr ( 'placeholder' ) ) { 
      $(this).val('');
    }
}).blur(function(){
    if($(this).val() == "")
    {
        $(this).val($(this).attr('placeholder'))
    }
}
);

Working Example