使用 HTML 在凭证字段中添加灰色文本

Posted

技术标签:

【中文标题】使用 HTML 在凭证字段中添加灰色文本【英文标题】：Adding the greyish text in the credential fields using HTML 【发布时间】：2021-10-06 06:47:05 【问题描述】：

某些网站在所需凭据旁边的空白处写有灰色文本，例如Gmail（我不允许添加图片，遗憾的是），但是，当您单击该框时，灰色文本会消失.我在 html 中有以下代码，但我不知道是否可以添加该功能：

<html>
    <head>
        <title>My code</title>
    </head>
    <body>
        <h1>Registration form</h1>

        <form>
            <fieldset>
                
                <label for="fname">First Name</label>
                <input type="text" id="fname" name="fname"><br><br>
                <label for="lname">Last Name</label> 
                <input type="text" id="lname" name="lname"><br><br>
                <label for="email">Email</label>
                <input type="email" id="Email" name="Email"><br><br>
                <label for="password">Password</label>
                <input type="password" id="Password" name="Password">
            </fieldset>
        </form>
    </body>
</html>

当我运行此代码时，框/字段显示为空并且不显示灰色文本（如“电子邮件”）。谁能告诉我如何使用 HTML 添加该功能？

【问题讨论】：

【参考方案1】：

你可以使用placeholder属性。

&lt;input type="text" placeholder="hello"&gt;

注意： 您可以使用 css ::placeholder 伪元素更改占位符的样式。

编辑： 如果您想在获得焦点时隐藏占位符，请执行以下操作：

#myInput:focus::placeholder
  color: transparent;

&lt;input type="text" placeholder="hello" id="myInput"&gt;

【讨论】：

太棒了！谢谢！ （如果您不介意，还有一个问题：这可行，但是当我单击该框时，灰色文本仍然存在，并且仅在我在那里输入时才消失，与 Google 中的不同，您知道该怎么做吗？） 谢谢！我不着急，在你方便的时候做吧:) 您的查询：***.com/questions/9707021/…【参考方案2】：

需要在html中添加名为placeholder的属性

<html>
    <head>
        <title>My code</title>
    </head>
    <body>
        <h1>Registration form</h1>

        <form>
            <fieldset>
                
                <label for="fname">First Name</label>
                <input type="text" id="fname" name="fname" placeholder="First Name"><br><br>
                <label for="lname">Last Name</label> 
                <input type="text" id="lname" name="lname" placeholder="Last Name"><br><br>
                <label for="email">Email</label>
                <input type="email" id="Email" name="Email" placeholder="Email"><br><br>
                <label for="password">Password</label>
                <input type="password" id="Password" name="Password" placeholder="Password">
            </fieldset>
        </form>
    </body>
</html>

【讨论】：

谢谢！这解决了这个难题。 （对不起。我没有足够的声望来投票）

以上是关于使用 HTML 在凭证字段中添加灰色文本的主要内容，如果未能解决你的问题，请参考以下文章

给input文本框添加灰色提示文字,三种方法.

C# 编辑框添加灰色提示信息

页面多个文本框，默认值为灰色，修改时为黑色，失去焦点是又变为灰色怎么弄？

动态改变文本字段的文本颜色

SwiftUI - 检测文本字段中的变化

R语言gt包和gtExtras漂亮地显示表格数据：gt_merge_stack函数基于现有的gt表合并堆叠（stack）两个数据列的内容顶部文本使用大写黑色粗体，而下部灰色小体在表格中添加图标