更新

Question

“通过电子邮件准备就绪时收到通知”的部分是相关文字。我在Wordpress网站上为此页面使用WP维护模式插件https://wordpress.org/plugins/wp-maintenance-mode/。您可以在我的网站http://boasish.com上看到该文本框。

<div class="subscribe_wrapper" style="min-height: 100px;">
  <form class="subscribe_form" novalidate="novalidate">
    <input type="text" placeholder="Get notified when it is ready via email" name="email" class="email_input" data-rule-required="true" data-rule-email="true" aria-required="true">
    <input type="submit" value="Submit">
  </form>
</div>

.wrap form.subscribe_form input[type="text"] {
  text-align: center;
  font-family: 'Myriad Pro';
  height:42px
  padding: 11px 10px 10px 0;
  width: 388px;
  padding-top: 16px
}

Answer 1

它属于input元素的placeholder属性。作为纯CSS解决方案，当white获取:focus ed：

<input> =“js”data-hide =“false”>＆＃13;

＆＃13;

.email_input:focus::-webkit-input-placeholder { /* WebKit browsers */
  color: white;
}
.email_input:focus:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color: white;
}
.email_input:focus::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: white;
}
.email_input:focus:-ms-input-placeholder { /* Internet Explorer 10+ */
  color: white;
}

＆＃13;

<input type="text" placeholder="Get notified when it is ready via email" name="email" class="email_input" data-rule-required="true" data-rule-email="true" aria-required="true">

＆＃13;

Answer 2

更新

Hashem Qolam i建议的干净的css解决方案更好，更不引人注目。老实说，我没有想过这样的方法，但已经写了90％的答案。我建议你一起去吧！

文本框使用占位符标记，该标记在用户开始编写时自动清除。我建议您保留这种方式，因为它并非完全出乎意料的行为。大多数用户习惯于在您开始书写的那一刻或者您点击该字段时文本消失的情况。

很快，它可以作为提醒或指针在此字段中输入的内容。

占位符属性指定描述的短提示   输入字段的期望值（例如，样本值或短的   预期格式的描述。）

在用户输入之前，输入字段中会显示短提示   价值。

注意：占位符属性适用于以下输入类型：   文本，搜索，网址，电话，电子邮件和密码。

如果你仍然想在点击的那一刻清除它，你将不得不使用某种javascript。如果您可以以某种方式直接编辑插件，可以将其添加到复选框：

onfocus =＆＃34; this.placeholder =＆＃39;＆＃39;＆＃34;
onblur =＆＃34; this.placeholder =＆＃39;当通过电子邮件准备就绪时收到通知＆＃34;

如果您无法编辑插件，则必须在页面上插入一些javascript，内容如下：

//Clear placeholder on focus;
$('.subscribe_form .email_input').focus(function()
{
   $(this).attr('placeholder', '');
});

//Restore the placeholder on blur (loss of focus)
$('.subscribe_form .email_input').blur(function()
{
   $(this).attr('placeholder', 'Get notified when its ready via email');
});

点击它后，如何使文本框中的文本消失？

2 个答案:

更新