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

I don't think that you can do it ONLY with standard placeholders, but you can use this example http://css-plus.com/2011/09/make-the-input-placeholder-user-friendly/

Answer 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)