当前位置：文江博客话题详情

预填充文本字段的脚本

发布于 2024-12-03 23:31:22 字数 123 浏览 1 评论 0原文

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

卖梦商人 2024-12-10 23:31:22

HTML5 支持占位符文本，您可以像这样使用它。

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

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

HTML5 supports placeholder text, which you can use like this

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

This will automatically disappear when you click on the textfield. For older browsers, you can use one of the above suggestions.

回复收藏 0 原文

酒浓于脸红 2024-12-10 23:31:22

这是我在我的网站 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" />

This is what I use on my website Expiringlinks.co. Now, if you only want to apply this to one input, change $('input') to $('#yourinputid'). The input field should have a value field that equals your before text.

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

    });

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


    });

For you input field

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

回复收藏 0 原文

一场信仰旅途 2024-12-10 23:31:22

jsFiddle 示例

或者，稍有不同的 fiddle 不需要标签上的 ID，但需要将文本框/标签包裹在某些内容中，例如

标签。

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();
    });
});

jsFiddle example

Or, a slightly different fiddle that doesn't require an ID on the label, but needs the textbox/label to be wrapped in something, for example a <p> tag.

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();
    });
});

回复收藏 0 原文

~没有更多了~