javascript - How to keep input placeholder visible when user is typing - Stack Overflow

admin管理员组

文章数量:1333435

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

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

• javascript
• html
• css
• placeholder

Share Follow asked Oct 22, 2013 at 11:13 DavidDavid 16.1k2323 gold badges9595 silver badges154154 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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>

本文标签： javascriptHow to keep input placeholder visible when user is typingStack Overflow