javascript - 输入类型 "Text"会出现模糊文本，焦点消失？

Question

某些网站的表单输入类型为“text”。在这些文本框中有一个模糊的文本，例如:“在此处输入您的名字”。 然后 onClick 或 OnFocus 或其他什么，文本消失，您可以在文本框中输入内容。

就像在 stackoverflow 上发布问题的标题一样，同样的事情。

如何以最简单的方式完成此操作？如果没有涉及太多 js 的话会更喜欢。

谢谢

Answer 1

这不是模糊的文本，它被称为“水印”。您可以通过在输入上使用内联 onfocus() 和 onblur() 语句来创建相同的效果。

例如:

<input type="text" 
       class="watermark"
       value="Enter your name" 
       onfocus="if ( this.value == this.defaultValue || this.value == '' ) { this.value = ''; this.className = 'regular';}" 
       onblur="if ( this.value == '' ) { this.value = this.defaultValue; this.className='watermark';}" />

然后在 CSS 文件中，为 .watermark 和 .regular 定义类。这样，当显示为水印时，文本将是半透明的，而当用户键入一些信息时，文本将变得完全不透明:

input.watermark {color:#ddd;}
input.regular {color:#000;}