如何使HTML文本框显示空白时的提示?

时间:2008-09-20 13:55:10

标签: javascript html html5

我希望我的网页上的搜索框以灰色斜体显示“搜索”一词。当框接收焦点时,它应该看起来像一个空文本框。如果其中已有文本,则应正常显示文本(黑色,非斜体)。这将有助于我通过删除标签来避免混乱。

顺便说一句,这是一个页面Ajax搜索,因此它没有按钮。

22 个答案:

答案 0 :(得分:344)

另一个选项是,如果您很乐意仅针对较新的浏览器使用此功能,则可以使用HTML 5的占位符属性提供的支持:

<input name="email" placeholder="Email Address">

如果没有任何样式,Chrome中的内容如下所示:

enter image description here

您可以尝试演示here HTML5 Placeholder Styling with CSS

请务必查看browser compatibility of this feature。 3.7中添加了对Firefox的支持。 Chrome很好。 Internet Explorer仅在10中添加了支持。如果您的目标浏览器不支持输入占位符,则可以使用名为jQuery HTML5 Placeholder的jQuery插件,然后添加以下JavaScript代码以启用它。

$('input[placeholder], textarea[placeholder]').placeholder();

答案 1 :(得分:91)

这被称为文本框水印,它通过JavaScript完成。

或者如果你使用jQuery,这是一个更好的方法:

答案 2 :(得分:40)

您可以使用HTML中的placeholder attribute设置占位符browser support)。 font-stylecolor可以是changed with CSS(虽然浏览器支持有限)。

input[type=search]::-webkit-input-placeholder { /* Safari, Chrome(, Opera?) */
 color:gray;
 font-style:italic;
}
input[type=search]:-moz-placeholder { /* Firefox 18- */
 color:gray;
 font-style:italic;
}
input[type=search]::-moz-placeholder { /* Firefox 19+ */
 color:gray;
 font-style:italic;
}
input[type=search]:-ms-input-placeholder { /* IE (10+?) */
 color:gray;
 font-style:italic;
}
<input placeholder="Search" type="search" name="q">

答案 3 :(得分:20)

您可以添加和删除特殊的CSS类,并使用JavaScript修改输入值onfocus / onblur

<input type="text" class="hint" value="Search..."
    onfocus="if (this.className=='hint') { this.className = ''; this.value = ''; }"
    onblur="if (this.value == '') { this.className = 'hint'; this.value = 'Search...'; }">

然后在CSS中指定一个带有所需样式的提示类,例如:

input.hint {
    color: grey;
}

答案 4 :(得分:6)

最好的方法是使用某种JavaScript库(如jQueryYUI)连接JavaScript事件,并将代码放在外部.js文件中。

但是如果你想要一个快速而肮脏的解决方案,这就是你的内联HTML解决方案:

<input type="text" id="textbox" value="Search"
    onclick="if(this.value=='Search'){this.value=''; this.style.color='#000'}" 
    onblur="if(this.value==''){this.value='Search'; this.style.color='#555'}" />

已更新:添加了所需的着色内容。

答案 5 :(得分:4)

前段时间我发布了a solution for this on my website。要使用它,请导入一个.js文件:

<script type="text/javascript" src="/hint-textbox.js"></script>

然后使用CSS类hintTextbox注释您想要提示的任何输入:

<input type="text" name="email" value="enter email" class="hintTextbox" />

有更多信息和示例here

答案 6 :(得分:3)

现在变得非常容易。 在html中,我们可以为输入元素提供占位符属性。

<强> e.g。

<input type="text" name="fst_name" placeholder="First Name"/>

查看更多详情:http://www.w3schools.com/tags/att_input_placeholder.asp

答案 7 :(得分:3)

这是一个使用Google Ajax库缓存和一些jQuery魔术的功能示例。

这将是CSS:

<style type="text/stylesheet" media="screen">
    .inputblank { color:gray; }  /* Class to use for blank input */
</style>

这将是JavaScript代码:

<script language="javascript"
        type="text/javascript"
        src="http://www.google.com/jsapi">
</script>
<script>
    // Load jQuery
    google.load("jquery", "1");

    google.setOnLoadCallback(function() {
        $("#search_form")
            .submit(function() {
                alert("Submitted. Value= " + $("input:first").val());
                return false;
        });

        $("#keywords")
            .focus(function() {
                if ($(this).val() == 'Search') {
                    $(this)
                    .removeClass('inputblank')
                    .val('');
                }
            })
            .blur(function() {
                if ($(this).val() == '') {
                    $(this)
                    .addClass('inputblank')
                    .val('Search');
                }
            });
    });
</script>

这就是HTML:

<form id="search_form">
    <fieldset>
        <legend>Search the site</legend>
            <label for="keywords">Keywords:</label>
        <input id="keywords" type="text" class="inputblank" value="Search"/>
    </fieldset>
</form>

我希望这足以让你对GAJAXLibs和jQuery感兴趣。

答案 8 :(得分:2)

使用jQuery Form Notifier - 它是最受欢迎的jQuery插件之一,并没有遇到其他一些jQuery建议的错误(例如,你可以自由设置水印的样式,而不用担心它是否将保存到数据库中。)

jQuery Watermark直接在表单元素上使用单个CSS样式(我注意到应用于水印的CSS字体大小属性也影响了文本框 - 而不是我想要的)。使用jQuery Watermark的优点是你可以将文本拖放到字段中(jQuery Form Notifier不允许这样做)。

其他人建议的另一个人(digitalbrush.com上的那个人)会不小心将水印值提交给您的表单,所以我强烈建议不要这样做。

答案 9 :(得分:2)

对于jQuery用户:naspinski的jQuery链接似乎坏了,但试试这个: http://remysharp.com/2007/01/25/jquery-tutorial-text-box-hints/

你获得免费的jQuery插件教程作为奖励。 :)

答案 10 :(得分:2)

这被称为“水印”。

我找到了jQuery插件 jQuery watermark ,与第一个答案不同,它不需要额外设置(原始答案在提交表单之前还需要特殊调用)。 / p>

答案 11 :(得分:2)

我发现jQuery插件 jQuery Watermark 比顶部答案中列出的要好。为什么更好?因为它支持密码输入字段。此外,设置水印(或其他属性)的颜色就像在CSS文件中创建.watermark引用一样简单。

答案 12 :(得分:1)


您可以使用名为placeholder=""的属性 这是一个演示:

<html>
<body>
// try this out!
<input placeholder="This is my placeholder"/>
</body>
</html>

答案 13 :(得分:1)

使用背景图片渲染文字:

 input.foo { }
 input.fooempty { background-image: url("blah.png"); }

然后您需要做的就是检测value == 0并应用正确的类:

 <input class="foo fooempty" value="" type="text" name="bar" />

jQuery JavaScript代码如下所示:

jQuery(function($)
{
    var target = $("input.foo");
    target.bind("change", function()
    {
        if( target.val().length > 1 )
        {
            target.addClass("fooempty");
        }
        else
        {
            target.removeClass("fooempty");
        }
    });
});

答案 14 :(得分:1)

您可以轻松地将一个框读为“搜索”,然后当焦点更改为时,将删除文本。像这样:

<input onfocus="this.value=''" type="text" value="Search" />

当然,如果你这样做,用户自己的文字会在点击时消失。所以你可能想要使用更健壮的东西:

<input name="keyword_" type="text" size="25"  style="color:#999;" maxlength="128" id="keyword_"
onblur="this.value = this.value || this.defaultValue; this.style.color = '#999';"
onfocus="this.value=''; this.style.color = '#000';"
value="Search Term">

答案 15 :(得分:0)

首次加载页面时,会在文本框中显示“搜索”,如果需要,则显示为灰色。

当输入框获得焦点时,选择搜索框中的所有文本,以便用户可以开始输入,这将删除过程中的所选文本。如果用户想要再次使用搜索框,这也可以很好地工作,因为他们不必手动突出显示以前的文本来删除它。

<input type="text" value="Search" onfocus="this.select();" />

答案 16 :(得分:0)

你想把这样的东西分配给onfocus:

if (this.value == this.defaultValue)
    this.value = ''
this.className = ''

这对于onblur:

if (this.value == '')
    this.value = this.defaultValue
this.className = 'placeholder'

(你可以使用一些更聪明的东西,比如框架函数,来做你想要的类名转换。)

使用这样的CSS:

input.placeholder{
    color: gray;
    font-style: italic;
}

答案 17 :(得分:0)

我喜欢“知识Chikuse”的解决方案 - 简单明了。只有在页面加载准备就绪时才需要添加模糊调用,这将设置初始状态:

$('input[value="text"]').blur();

答案 18 :(得分:0)

我正在使用一种简单的单行javascript解决方案,效果很好。这是文本框和文本区域的示例:

    <textarea onfocus="if (this.value == 'Text') { this.value = ''; }" onblur="if (this.value == '') { this.value = 'Text'; }">Text</textarea>

    <input type="text" value="Text" onfocus="if (this.value == 'Text') { this.value = ''; }" onblur="if (this.value == '') { this.value = 'Text'; }">

只有“缺点”是在对字段值进行任何操作之前,先在$ _POST或Javascript验证中进行验证。意思是,检查字段的值不是“文本”。

答案 19 :(得分:-1)

$('input[value="text"]').focus(function(){ 
if ($(this).attr('class')=='hint') 
{ 
   $(this).removeClass('hint'); 
   $(this).val(''); 
}
});

$('input[value="text"]').blur(function(){
  if($(this).val() == '')
  {
    $(this).addClass('hint');
    $(this).val($(this).attr('title'));
  } 
});

<input type="text" value="" title="Default Watermark Text">

答案 20 :(得分:-1)

简单的Html'required'标签很有用。

<form>
<input type="text" name="test" id="test" required>
<input type="submit" value="enter">
</form>

答案 21 :(得分:-3)

来自http://asp.net的用户AJAXToolkit