How to keep input placeholder visible when user is

问题:

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

回答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/

回答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)