How to Keep Input Placeholder Visible When User Is Typing

HTML - Keep placeholder when user types

Hard to think of a good usecase for such a behaviour, as it is blocking some of the users input.

An easy way would be to use input::after but this is not supported by any browser right now (thanks @JukkaK.Korpela).

But you can use a wrapper element and a data attribute, as follows:

<div class="placeholder" data-placeholder="my placeholder">
    <input value="My text" />  
</div>

With this css:

.placeholder
{
    position: relative;
}

.placeholder::after
{
    position: absolute;
    left: 5px;
    top: 3px;
    content: attr(data-placeholder);
    pointer-events: none;
    opacity: 0.6;
}

Resulting in:

Click here for jsFiddle demo.

---

Since you will have to do a lot of tweaking to make this look good, you may also consider using the wrapping <div> element as a input "look alike":

<div class="editable" data-placeholder="my placeholder">
    <input type="text" value="my Text" />
</div>

CSS:

.editable
{
    position: relative;
    border: 1px solid gray;
    padding: 3px;
    background-color: white;
    box-shadow: rgba(0,0,0,0.4) 2px 2px 2px inset;
}

.editable > input
{
    position: relative;
    z-index: 1;
    border: none;
    background-color: transparent;
    box-shadow: none;
    width: 100%;
}

.editable::after
{
    position: absolute;
    left: 4px;
    top: 5px;
    content: attr(data-placeholder);
    pointer-events: none;
    opacity: 0.5;
    z-index: 1;
}

Click here for the Demo 3. (with mocked <input />)

Click here for the Demo 2. (with contenteditable)

How to keep placeholder visible when user is typing first substring of the placeholder text

There are many ways to achieve that effect. This is one way of doing it:

<div class="wrapper">
    <span class="textbox" contentEditable="true">Lorem i</span><span class="gray"></span>
</div>
<!-- and some CSS magic to make it look legit -->

var text = "Lorem ipsum";

$(".wrapper > .textbox").on("input", function(){
    var ipt = $(this).text().replace(/\u00A0/g, " ");
    //freakin NO-BREAK SPACE needs extra care
    if(text.indexOf(ipt) == 0){
        $(".gray").text(text.substr(ipt.length, text.length));
    }else{
        $(".gray").text("");
    }
}).trigger("input");

http://jsfiddle.net/DerekL/7sD2r/

_{About the NO-BREAK SPACE, see here.}

Keep placeholder partially while typing in input type text

The pattern you are describing is an input mask, so you might have more luck searching for this than placeholder.

First of all, have you considered using <input type="date">? Most browsers also provide an input mask for this kind of input.

If this doesn’t help you, HTML does not provide input mask functionality natively, so you will need to find a library that does that for you.

As always, you should clarify your basic requirements before choosing a library from npm. Most notably, it should be accessible for users with disabilities. Input masks seemingly improve user experience, but they are hard to get right. If not done well, they actually render the user’s experience worse.

Things the input should still support with input mask applied:

• (Copying and) Pasting the value from elsewhere
• Autofill by the browser (for your birthdate, for example)
• Screen readers announce the value correctly
• Correcting the value by means of keyboard only, for example deleting one number in the middle
• The pattern adjusts with the locale (language)

Keep input's place holder text while typing

I think you want to be like that.

  .full-input {  display: inline-block;  padding: 3px;  border: 2px solid blue;}input {  outline: none;  border: none;  display: inline-block;  line-height: 1.2em;  font-size: 14pt;}label {  display: inline-block;  font-size: 12px;  color: blue;}

<div class='full-input'><label for='price'>Price</label>  <input type='number'class="textfield numberField font"  name="Price"> </div>

How to move placeholder to top on focus AND while typing?

You could do it like this

HTML:

<div>
  <input type="text" class="inputText" />
  <span class="floating-label">Your email address</span>
</div>

CSS:

input:focus ~ .floating-label,
input:not(:focus):valid ~ .floating-label{
  top: 8px;
  bottom: 10px;
  left: 20px;
  font-size: 11px;
  opacity: 1;
}

.inputText {
  font-size: 14px;
  width: 200px;
  height: 35px;
}

.floating-label {
  position: absolute;
  pointer-events: none;
  left: 20px;
  top: 18px;
  transition: 0.2s ease all;
}

Working JSFiddle here https://jsfiddle.net/273ntk5s/2/

Keep placeholder when focused in webkit browser using css

You can, only for webkit, add a -webkit-transition-duration property for an infinite time to delay the placeholder from going away. You will however have to change the value to 0s using Javascript when the user start to type unless you want the text and the placeholder overlapping.

Example:

[placeholder]::-webkit-input-placeholder {
    color: #888888;
    -webkit-transition-duration:86400s; // 24 hours
}

Show placeholder until user inputs text without spaces

You could handle the keydown event to stop it when the key is a whitespace.

document.getElementById("name").addEventListener("keydown", function(e) {  if(document.getElementById("name").value.length === 0 && e.key === ' ') {    if(e.preventDefault) { e.preventDefault(); }    else { e.returnValue = false; }  }});

<input type="text" id="name"  placeholder="Enter Your Name"/>

---

Related Topics