如何使HTML文本框在为空时显示提示?

另一个选择是,如果您愿意只在较新的浏览器上使用此功能,则使用HTML5提供的支持 占位符 属性:

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

在没有任何样式的情况下,在Chrome中,这看起来像:

你可以试试演示 here 而在 HTML5 Placeholder Styling with CSS .

一定要检查 browser compatibility of this feature . 3.7增加了对火狐的支持。铬很好。Internet Explorer仅在10中添加了支持。如果目标浏览器不支持输入占位符,则可以使用名为 jQuery HTML5 Placeholder ,然后只需添加以下javascript代码即可启用它。

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

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

• http://naspinski.net/post/Text-Input-Watermarks-using-Javascript-(IE-Compatible).aspx

或者,如果您使用jquery,一种更好的方法:

• http://digitalbush.com/projects/watermark-input-plugin/
• 或 code.google.com/p/jquery-watermark

您可以设置 占位符 使用 placeholder attribute 在HTML中 browser support )这个 font-style 和 color 可以是 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">

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

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

最好的方法是使用类似于 jQuery 或 YUI 并将代码放在一个外部.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'}" />

更新的 :添加了所需的着色材料。

我张贴 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 .

下面是一个使用GoogleAjax库缓存和一些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都感兴趣。

现在变得很容易了。 在HTML中,我们可以 占位符 属性为 输入 元素。

例如

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

查看更多详细信息: http://www.w3schools.com/tags/att_input_placeholder.asp

对于jquery用户:naspinski的jquery链接似乎已断开,但请尝试以下方法: http://remysharp.com/2007/01/25/jquery-tutorial-text-box-hints/

您将获得免费的jquery插件教程作为奖励。:)

我找到了jquery插件 jQuery Watermark 比第一个答案中列出的更好。为什么更好?因为它支持密码输入字段。此外,设置水印(或其他属性)的颜色与创建 .watermark CSS文件中的引用。

这叫做“水印”。

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

使用 jQuery Form Notifier -它是最流行的jquery插件之一,并且不会受到其他jquery建议的一些错误的影响(例如,您可以自由设置水印样式,而不必担心它是否会保存到数据库中)。

jquery水印直接在表单元素上使用单一的CSS样式(我注意到应用于水印的CSS字体大小属性也会影响文本框,而不是我想要的)。带有jquery水印的优点是可以将放置文本拖到字段中(jquery表单通知程序不允许这样做)。

另一个由其他人(digitalbrush.com上的人)建议的,会意外地将水印值提交到您的表单中,所以我强烈建议不要这样做。

使用背景图像呈现文本:

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

你可以很容易地让一个框读“搜索”,然后当焦点变为它时,文本被删除。像这样:

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

当页面第一次加载时,让搜索显示在文本框中,如果您希望显示为灰色。

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

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

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

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

您要将类似这样的内容分配给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;
}

$('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">

简单的HTML“必选”标记很有用。

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

用户Ajaxtoolkit来自 http://asp.net