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

Solution 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>

Solution 2:

I am not sure if keeping placeholder visible on typing is possible or not but you can shift it to right by using this css:

CSS

.example:focus::-webkit-input-placeholder {
    text-align: right;
    opacity: 1;
}

demo

You can use transition to make it align smoothly.

But one solution to your problem is to write the text in placeholder into a span and translate it to right when user starts typing (by using JS)