如何让HTML文本框在空的时候显示提示？
我希望我的网页上的search框以灰色斜体显示“search”一词。 当箱子获得焦点时，它应该看起来就像一个空的文本框。 如果已经有文字，则应该正常显示文字（黑色，非斜体）。 这将帮助我通过删除标签来避免混乱。
顺便说一句，这是一个页面上的Ajaxsearch，所以它没有button。
另一种select是，如果您只希望为较新的浏览器提供此function，则可以使用HTML 5的占位符属性提供的支持：
<input name="email" placeholder="Email Address"> 在没有任何风格的情况下，在Chrome中，这看起来像：
您可以在这里和HTML5占位符样式CSS中尝试演示。
一定要检查这个function的浏览器兼容性 。 在3.7中增加了对Firefox的支持。 Chrome很好。 Internet Explorer仅在10中添加了支持。如果您的浏览器不支持input占位符，则可以使用名为jQuery HTML5占位符的jQuery插件，然后添加以下JavaScript代码以启用它。
$('input[placeholder], textarea[placeholder]').placeholder();
这被称为文本框水印，并通过JavaScript完成。
或者如果你使用jQuery，一个更好的方法：
- http://digitalbush.com/projects/watermark-input-plugin/
- 或code.google.com/p/jquery-watermark
您可以使用HTML中的placeholder属性 （ 浏览器支持 ）来设置占位 placeholder 。 font-style和color可以用CSS来改变 （尽pipe浏览器的支持是有限的）。
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类，并用JavaScript修改onfocus / onblur的input值：
<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等JavaScript库连接你的JavaScript事件，并把你的代码放在一个外部的.js文件中。
但是，如果你想要一个快速和肮脏的解决scheme，这是你的内联HTML解决scheme：
<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'}" />
更新 ：添加了请求的着色东西。
前段时间我在网站上发布了一个解决scheme 。 要使用它，请导入一个.js文件：
<script type="text/javascript" src="/hint-textbox.js"></script>
然后用CSS类hintTextbox注释任何你想要提示的input：
<input type="text" name="email" value="enter email" class="hintTextbox" />
更多的信息和例子可以在这里find 。
下面是一个有关Google Ajax库caching和一些jQuery魔术的function性示例。
这将是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元素的占位符属性。
例如
<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比顶级答案中列出的更好。 为什么更好？ 因为它支持密码input字段。 此外，设置水印（或其他属性）的颜色就像在CSS文件中创build.watermark引用一样简单。
这被称为“水印”。
我发现jQuery插件jQuery水印 ，不像第一个答案，不需要额外的设置（原始的答案还需要一个特殊的电话提交表单之前）。
使用jQuery Form Notifier – 这是最stream行的jQuery插件之一，并没有受到其他jQuerybuild议在这里的一些错误（例如，你可以自由的风格的水印，而不必担心，如果它会被保存到数据库）。
jQuery Watermark直接在表单元素上使用单一CSS样式（我注意到应用于水印的CSS字体大小属性也影响了文本框，而不是我想要的）。 jQuery Watermark的优点是可以将文本拖放到字段中（jQuery Form Notifier不允许这样做）。
另外一些人（digitalbrush.com上的人）build议，会不小心将水印值提交给你的表单，所以我强烈build议不要这样做。
使用背景图片来呈现文字：
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"); } }); });
你可以很容易地有一个框中读取“search”，然后当焦点改变到文本被删除。 像这样的东西：
<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">
第一次加载页面时，在文本框中显示“search”，如果您希望显示为灰色，则显示为灰色。
当input框获得焦点时，selectsearch框中的所有文本，以便用户可以开始input，这将删除进程中的选定文本。 如果用户想再次使用search框，这也将很好地工作，因为他们不必手动突出显示以前的文本来删除它。
<input type="text" value="Search" onfocus="this.select();" />
我喜欢“Knowledge Chikuse”的解决scheme – 简单明了。 只有当页面加载准备好时才需要添加一个模糊的调用，它将设置初始状态：
$('input[value="text"]').blur();
你想要像这样分配给焦点：
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'required'标签是有用的。
<form> <input type="text" name="test" id="test" required> <input type="submit" value="enter"> </form>
