How to keep input placeholder visible when user is typing

Question

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

Answer 1

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>