Is it possible to have placeholder and floating input text at same time?

Question

I am trying to have placeholder text and floating text input (which moves up when user clicks on the input field).

Below are the 2 cases I would like to combine.

Case1 ("Street Address" will move up):

Case2 ("123 Example Street" will disappear):

Currently it overrides:

This article says it's one of the cons of the material design http://bradfrost.com/blog/post/float-label-pattern/

Adding the code part (I am using material design lite library):

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label streetupdate" >
        <input class="mdl-textfield__input" type="text" id="input_name" />
                          
        <label class="mdl-textfield__label" for="input_name">Street Address</label>
</div>

It is possible. Have you tried anything? Please provide some code. — mattdevio, Jan 08 '17 at 00:42
@magreenberg Added the code. adding placeholder="123 Example" in the input element overrides the floating text — JavaQuest, Jan 08 '17 at 00:47
You want both text to show at the same time or chaging from placeholder into label once the user clicks the input? (placeholder text shows when the input is empty: "youremail@domain.cl" and changes into "email" label floating above when the user clicks and enters it's email) — LordNeo, Jan 08 '17 at 00:53
I wanted to show both the texts at the same time, but I feel even the 2nd option you mentioned is good enough. — JavaQuest, Jan 08 '17 at 00:58

score 2 · Accepted Answer · edited May 23 '17 at 12:24

Vanilla JS:

input = document.getElementById("input_name");
inputP = input.getAttribute("placeholder");

input.placeholder = "";
input.onfocus = function () {
 this.placeholder = inputP;
}

input.onblur = function () {
 this.placeholder = "";
}

input:focus ~ .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;
}

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label streetupdate" >
        <input class="mdl-textfield__input inputText" placeholder="123 Address" type="text" id="input_name"/>

        <label class="floating-label mdl-textfield__label" for="input_name">Street Address</label>
</div>

Also Prue CSS:

input:focus ~ .floating-label,
input: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;
}

/* Cluttered Magic */

input:focus::-webkit-input-placeholder,
input:valid::-webkit-input-placeholder{
  opacity: 1;
}

input:focus::-moz-placeholder,
input:valid::-moz-placeholder{
  opacity: 1;
}

input:focus:-ms-input-placeholder,
input:valid:-ms-input-placeholder{
  opacity: 1;
}

input:focus:-moz-placeholder,
input:valid:-moz-placeholder {
  opacity: 1;
}

input::-webkit-input-placeholder,
input::-webkit-input-placeholder {
  opacity: 0;
  -webkit-transition: 0.2s ease opacity;
  transition: 0.2s ease opacity;
}

input::-moz-placeholder,
input::-moz-placeholder {
  opacity: 0;
  -webkit-transition: 0.2s ease opacity;
  transition: 0.2s ease opacity;
}

input:-ms-input-placeholder,
input:-ms-input-placeholder {
  opacity: 0;
  -webkit-transition: 0.2s ease opacity;
  transition: 0.2s ease opacity;
}

input:-moz-placeholder,
input:-moz-placeholder {
  opacity: 0;
  -webkit-transition: 0.2s ease opacity;
  transition: 0.2s ease opacity;
}

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label streetupdate" >
        <input class="mdl-textfield__input inputText" placeholder="123 Address" type="text" id="input_name" required/>

        <label class="floating-label mdl-textfield__label" for="input_name">Street Address</label>
</div>

Float label functionality from here

score 1 · Answer 2 · answered Jan 08 '17 at 01:12

The label appears when the input is focused:

input,
label {
  float: left;
  clear: both;
}
input {
  margin-top: 20px;
}
label {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transform: translateY(50%);
  transition: opacity .2s ease, transform .4s ease;
}
#container {
  position: relative;
}
input:focus + label {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .3s .1s ease, transform .4s ease;
}

<div id="container">
  <input placeholder="123 New York" type="text" id="input_name" />
  <label for="input_name">Street Address</label>
</div>

score 0 · Answer 3 · answered Jan 08 '17 at 01:04

HTML:

<!-- Without Placeholder -->
<div class="text-input">
  <input type='text' />
  <label>One</label>
</div>

<!-- With Placeholder -->
<div class="text-input">
  <input type='text' placeholder="Hello" />
  <label>Two</label>
</div>

CSS:

.text-input {
  position: relative;
  padding-top: 20px;
  margin-top: 5px;
}
.text-input input {
  height: 35px;
  width: 200px;
  border: 0;
  font-size: inherit;
  font-family: inherit;
  background: none;
  border-bottom: 2px solid #c2c2c2;
  outline: none;
  transition: .2s ease-out all;
}
.text-input input::placeholder {
  color: transparent;
  transition: .2s ease-out all;
}
.text-input label {
  position: absolute;
  left: 5px;
  top: 31px;
  color: #c2c2c2;
  transition: .2s ease-out all;
}
.text-input input:focus {
  border-bottom: 2px solid #89ac23;
}
.text-input input:focus + label {
  top: 0;
  left: 0;
  font-size: .8em;
  color: inherit;
}
.text-input input:focus::placeholder {
  color: #c2c2c2;
  transition-delay: .1s;
}

JSFiddle Example

thanks but with placeholder the same problem of overriding is happening — JavaQuest, Jan 08 '17 at 01:07
You may need to add your vendor prefixes to the ::placeholder tag. e.g `::-webkit-placeholder`, `::-moz-placeholder`, `:-ms-placeholder` — Pyx, Jan 08 '17 at 01:17

Ezhil Sankar · Answer 4 · 2022-06-30T16:56:49.117

0

Change you has-float-label class opacity -> like below

1. Step 1

.has-float-label .form-control:placeholder-shown:not(:focus)::-webkit-input-placeholder {
    opacity: 1
}

2. Step 2

Remove or unset the value of the below css class

.has-float-label .form-control:placeholder-shown:not(:focus)+label

edited Jun 30 '22 at 16:56

answered Jun 30 '22 at 16:52

Ezhil Sankar

1
1

Is it possible to have placeholder and floating input text at same time?

4 Answers4