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

Text as place holder for textbox input?

本文关键字：文本 占位符 输入      更新时间：2023-09-26

我注意到在一些网站，如http://academia.edu/，注册表单有一些"占位符"在他们的文本输入字段。这样，在文本框中，文本框内没有标签，只有一个相当轻微的字体"First name"。

使用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调试，我还不能跟踪他们是如何做到的。

有人知道如何产生这种效果吗?

对于现代浏览器，您可以使用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'))
    }
}
);

工作示例

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

你也可以附加一个"onBlur"事件处理程序，并将输入框的值恢复为默认值(如果用户没有输入任何内容)

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

HTML5占位符是你正在寻找的:

http://diveintohtml5.info/forms.html

在你的例子中应该是:

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

但是你也可以100%使用javascript:

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

相关文章：