文本作为文本框输入的占位符？答案

【问题标题】：Text as place holder for textbox input?文本作为文本框输入的占位符？
【发布时间】：2011-12-02 17:38:44
【问题描述】：

我注意到在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 调试，所以我还无法追踪他们是如何做到的。

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

【问题讨论】：

标签： javascript html css

【解决方案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

【讨论】：

我添加了一个if，这样如果用户已经输入了一些内容，代码就不会重置该值。
语句中的 if 放在哪里？更新代码会很有帮助，这样未来的用户就可以确切地知道正在谈论什么。 :)
@jlg 单击编辑日期将突出显示为您更改的代码。希望对您有所帮助。
哈哈是的！我从来不知道。谢谢:)

【解决方案2】：

您必须为输入框创建一个“onFocus”事件处理程序，并清除该输入框的值。当然，如果它是默认值（在您的示例中为“名字”），您只会清除该值，这样您就不会清除用户输入的任何内容，如果他稍后返回输入。

您还可以附加一个“onBlur”事件处理程序，并将输入框的值恢复为默认值（如果用户没有输入任何内容）。

【讨论】：

说得好。这是蓝图：456bereastreet.com/archive/200710/…

【解决方案3】：

<input id="user_first_name" name="user[first_name]" size="30" type="text" value="First Name" onFocus="inputFocus('First Name', this)" onBlur="inputBlur('First Name', this)">
<script type="text/javascriptt">
  function inputFocus(ph, el){
    if(el.value == ph)
      el.value = "";
  }
  function inputBlur(ph, el){
    if(el.value == "")
      el.value = ph;
  }
</script>

【讨论】：

【解决方案4】：

HTML5 占位符是您正在寻找的：

http://diveintohtml5.info/forms.html

在你的情况下是：

<input name="firstname" placeholder="First name">

但你也可以用 javascript 100% 做到这一点：

http://lab.dotjay.co.uk/experiments/forms/input-placeholder-text/

【讨论】：