CODEWITHSUNDEEP
javascripthtmlcssplaceholder
David
David

Reputation: 16130

How to keep input placeholder visible when user is typing

I have a new and intriguing requirement. Instead of the placeholder disappearing when the user starts typing, it should remain visible and shift over to the right hand side of the input box.

Is this even possible with a standard HTML placeholder? How might I achieve this?

Thanks

Upvotes: 6

Views: 11528

Answers (1)

benhatsor
benhatsor

Reputation: 2033

This is not possible with a standard HTML placeholder due to native behavior of it disappearing. However, you might want to consider adding an element to pose as the placeholder, and add a CSS selector to sense when the user starts typing (:placeholder-shown) and move it right.

Here's how it might be done:

.wrapper {
  position: relative;
  font-family: sans-serif;
  font-size: 14px;
  width: max-content;
}

.placeholder {
  position: absolute;
  right: 4px;
  top: 2px;
  pointer-events: none;
  opacity: .5;
}

.input:placeholder-shown + .placeholder {
  /* if real placeholder is shown - hide fake placeholder */
  opacity: 0;
}
<div class="wrapper">
  <input type="text" class="input" placeholder="Test">
  <div class="placeholder">Test</div>
</div>

Upvotes: 4

Related Questions