如何让HTML文本框在空白时显示提示？ [英] How do I make an HTML text box show a hint when empty?

问题描述

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

顺便说一句，这是一个页面

您可以尝试演示 here 和 使用CSS设置HTML5占位符样式 。

请务必检查此功能的浏览器兼容性。 3.7中增加了对Firefox的支持。 Chrome很好。 Internet Explorer仅在10中添加了支持。如果您的目标浏览器不支持输入占位符，则可以使用名为

  $（'noreferrer> jQuery HTML5 Placeholder ，然后只需添加以下JavaScript代码即可启用它。 input [placeholder]，textarea [placeholder]'）。placeholder（）; 
  

I want the search box on my web page to display the word "Search" in gray italics. When the box receives focus, it should look just like an empty text box. If there is already text in it, it should display the text normally (black, non-italics). This will help me avoid clutter by removing the label.

BTW, this is an on-page Ajax search, so it has no button.

解决方案

Another option, if you're happy to have this feature only for newer browsers, is to use the support offered by HTML 5's placeholder attribute:

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

In the absence of any styles, in Chrome this looks like:

You can try demos out here and in HTML5 Placeholder Styling with CSS.

Be sure to check the browser compatibility of this feature. Support in Firefox was added in 3.7. Chrome is fine. Internet Explorer only added support in 10. If you target a browser that does not support input placeholders, you can use a jQuery plugin called jQuery HTML5 Placeholder, and then just add the following JavaScript code to enable it.

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

这篇关于如何让HTML文本框在空白时显示提示？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！