预填充文本字段的脚本答案

【问题标题】：script that pre-fills a textfield预填充文本字段的脚本
【发布时间】：2011-09-10 20:53:09
【问题描述】：

我正在尝试找到一个脚本，该脚本将使用诸如“填写您的电子邮件地址”之类的文本填充一个 optin 表单的文本字段，并在单击时消失。我知道他们遍布整个网络，但搜索它只会返回 javascript 自动填充脚本，其中建议从文本字段下方的下拉列表中列出。

【问题讨论】：

标签： javascript jquery textfield

【解决方案1】：

HTML5支持占位符文本，你可以这样使用

  <input name="email" placeholder="Enter your email address" />

当您单击文本字段时，它会自动消失。对于较旧的浏览器，您可以使用上述建议之一。

【讨论】：

【解决方案2】：

这是我在我的网站 Expiringlinks.co 上使用的。现在，如果您只想将其应用于一个输入，请将 $('input') 更改为 $('#yourinputid')。输入字段应该有一个等于你之前文本的值字段。

var tempValue='';
    $('input').click(function(){
        tempValue = $(this).attr('value');
        $(this).attr('value','');

    });

    $('input').focusout(function(){
        if ($(this).attr('value')==''){
        $(this).attr('value',tempValue);
        }


    });

为你输入字段

<input type="text" value="Whatever you want to show before the click" />

【讨论】：

@the_visit 您是否希望每次单击文本框时都将其清空？例如。单击框，输入内容，单击退出，然后单击返回-它会再次空白-您想要吗？只是检查:)
@joe - 老实说，我什至没有想到。我认为这很好。我很感激你问我。也许对我的大脑来说是一个很好的锻炼:-)

【解决方案3】：

jsFiddle example

或者，一个稍微不同的fiddle，它不需要标签上的ID，但需要将文本框/标签包裹在某些东西中，例如<p>标签。

HTML

<input type="text" name="email_address" id="Email" />
<label for="Email" id="EmailLabel">Please enter your email address</label>

CSS

label
{
    display: none;
}

jQuery

$(document).ready(function()
{
    $('#Email').focus(function()
    {
        $('#EmailLabel').show();
    }).blur(function()
    {
        $('#EmailLabel').hide();
    });
});

【讨论】：

@the_visit 另一个选择，只是为了好玩 :) jsfiddle.net/ShtxJ 好的，我现在完成了。
那太好了，当我的项目更详细的时候肯定会很快使用它