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

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

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

来源

2011-12-02 Hoàng Long

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

来源

2011-12-02 09:32:03

我已经添加了一个if，这样如果用户已经输入了某些东西，代码将不会重置该值。 –

啊是的，谢谢1月 –

如果在声明中说明了什么？更新代码会很有帮助，以便将来的用户确切地知道正在讨论的内容。 :) – jlg

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

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

来源

2011-12-02 09:29:57

不好说。这里的蓝图：http://www.456bereastreet.com/archive/200710/autopopulating_text_input_fields_with_javascript/ – albert

HTML5占位符是你在找什么：

http://diveintohtml5.info/forms.html

在你的情况下，它会是：

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

但你也可以用JavaScript 100％做到这一点：

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

来源

2011-12-02 09:35:41 anders

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

来源

2011-12-02 09:38:44 zuloo

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

回答

相关问题