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

Answer 2

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

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

Answer 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>

Answer 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/

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

4 个答案: