CODEWITHSUNDEEP
htmlcsstextbox
k65
k65

Reputation: 25

How do I make the text in a text box disappear when I click on it?

The part that says "Get notified when its ready via email" is the text in question. I am using the WP Maintenance Mode plugin https://wordpress.org/plugins/wp-maintenance-mode/ for this page on my Wordpress site. You can see the text box on my website 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
}

Upvotes: 0

Views: 3149

Answers (2)

user1372494
user1372494

Reputation:

Update

A clean css solution as suggested by Hashem Qolami is much better and unintrusive. I honestly didn't thought of such approach but already wrote 90% of my answer. I recommend that you go with it!

The textbox is using a placeholder tag, which gets automatically cleared the moment the user starts writing. I recommend that you leave it this way because it's not an entirely unexpected behavior. Most users are used to either situation where the text would disappear the moment you start writing or the moment you click on the field.

Shortly, it serves as a reminder or pointer what is it to be entered in this field.

The placeholder attribute specifies a short hint that describes the expected value of an input field (e.g. a sample value or a short description of the expected format).

The short hint is displayed in the input field before the user enters a value.

Note: The placeholder attribute works with the following input types: text, search, url, tel, email, and password.

If you still want to clear it the moment you click, you will have to use some sort of javascript. If you can directly edit the plugin in some way, you can add those to the check box:

  • onfocus="this.placeholder = ''"
  • onblur="this.placeholder = 'Get notified when its ready via email"

If you cannot edit the plugin, you will have to do insert some javascript on the page, something in the lines of:

//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');
});

Upvotes: 0

Hashem Qolami
Hashem Qolami

Reputation: 99494

It belongs to the placeholder attribute of the input element. As a pure CSS solution, you could change the color of the placeholder text to white when the <input> get :focused:

.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;
}
<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">

Upvotes: 1

Related Questions