Hide placeholder text on focus

html:

<p>

  <input type="text" class="form-control" placeholder="placeholder text" />

</p>

<p>

  <input type="text" class="form-control" placeholder="placeholder text" />

</p>

css:

.form-control:focus::placeholder {

  color: transparent;

}



.form-control:focus::-webkit-input-placeholder {

  color: transparent;

}



.form-control::focus:-ms-input-placeholder {

  color: transparent;

}