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