与其在表单中标记每个字段,有时(从设计的 Angular )在每个字段中使用占位符文本更可取。例如,而不是这样:
----------------------------------
Full Name: | |
----------------------------------
你有这个:
----------------------------------
| Full Name |
----------------------------------
当您在该字段中单击时,文本会消失,您可以随意输入任何内容。如果您跳过该字段而未输入任何文本,则占位符会重新出现。
我见过很多方法,但所有方法都涉及 JavaScript。例如,Twitter 在其 signup page 上做得不错但是如果 Javascript 被禁用,你最终会在“全名”这个词上输入你的名字。
我正在寻找一种仅使用 CSS 的方法,即使在禁用 JavaScript 的情况下也能正常工作。我想出的唯一可能的解决方案是设置 <input>
的背景标记所需文本的图像,然后使用 input:focus
当有人点击文本框时清除背景图像的伪类。这似乎可行,但最好不要使用图像。
有人知道如何执行此操作的好资源吗?
最佳答案
这是首选方法,适用于所有当前浏览器:
<input type="text" name="" placeholder="Full Name"/>
此版本适用于 IE9 及之前版本:
<input type="text" name="" value="Full Name" onfocus="value=''" onblur="value='Full Name'"/>
关于html - 仅使用 CSS(无 JavaScript)的输入字段中的占位符文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11371047/