如何让HTML文本框在空时显示提示？

Question

我希望我的网页上的搜索框以灰色斜体显示“搜索”一词。当箱子获得焦点时，它应该看起来像一个空的文本框。如果文本中已经有文本，它应该正常显示文本（黑色，非斜体）。这将通过删除标签来帮助我避免混乱。

顺便说一句，这是一个页面上Ajax搜索，所以它没有按钮。

Answer 1

另一种选择，如果你很高兴有此功能仅适用于新的浏览器，是使用由HTML 5的占位属性提供的支持：

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

在没有任何风格，在Chrome的这个样子：

您可以尝试演示了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(); 

Answer 2

，您可以用JavaScript添加和删除一个特殊的CSS类，并修改输入值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; 
} 

Answer 3

你可以很容易地有一个框中读取“搜索”，然后当焦点改变到它有文本被删除。事情是这样的：

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

Answer 4

最好的办法是使用某种JavaScript库像jQuery或YUI要连接您的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'}" /> 

更新：增加了要求着色的东西。

Answer 5

使用背景图片呈现文本：

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

Answer 6

你想指定类似这样的onfoc我们：

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

Answer 7

这就是所谓的文本框水印，它通过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

Answer 8

当第一次加载页面，有搜索出现在文字中x，如果你想要它是灰色的。

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

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

Answer 9

下面是一个有关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都感兴趣。

Answer 10

用户AJAXToolkit从http://asp.net

Answer 11

jQuery的用户：naspinski的jQuery的链接似乎打破，但试试这个： http://remysharp.com/2007/01/25/jquery-tutorial-text-box-hints/

你得到一个免费的jQuery插件教程作为奖金。 :)

Answer 12

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

Answer 13

这被称为“水印”。

我发现jQuery插件jQuery watermark，不像第一个答案，不需要额外的设置（原创答案也需要一个特殊的呼叫提交表单之前）。

Answer 14

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

Answer 15

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

Answer 16

您可以使用HTML（browser support）中的placeholder attribute设置占位符。 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">

Answer 17

使用jQuery Form Notifier - 这是最流行的jQuery插件之一，并不会从错误的其他一些jQuery的建议在这里做（例如，您可以自由风格的苦水印，而不用担心它是否会保存到数据库中）。 （我注意到应用于水印的CSS字体大小属性也影响了文本框 - 不是我想要的）。jQuery Watermark直接在表单元素上使用单一CSS样式（我注意到应用于水印的CSS字体大小属性也影响了文本框 - 不是我想要的）。 jQuery Watermark的优点是可以将文本拖放到字段中（jQuery Form Notifier不允许这样做）。

其他人建议的其他人（digitalbrush.com上的人），会意外地将水印值提交给您的表单，所以我强烈建议您不要这样做。

Answer 18

我喜欢“Knowledge Chikuse”的解决方案 - 简单明了。只需要添加一个调用模糊时，页面加载准备将设置初始状态：

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

Answer 19

简单的HTML“需要”的标签是非常有用的。

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

Answer 20

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

例如更多细节

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

检查：http://www.w3schools.com/tags/att_input_placeholder.asp