Simulation of a Placeholder

Simulation of a placeholder

With a small markup change and a script you can do this

The script simply append the user value to its value attribute, so one can use CSS to style it

p label {  position: relative;}p label input {  margin-top: 10px;}p label input[required] + span::after {  content:  ' *';  color: red;}p label span {  position: absolute;  top: 2px;  left: 5px;  pointer-events: none;  transition: top .5s;}p label input:not([value=""]) + span,p label input:focus + span {  top: -20px;}

<p>  <label>      <input oninput="this.setAttribute('value', this.value)" type="text" name="your-name" value="" size="40" required>      <span>Name</span>  </label></p>

How do I simulate placeholder functionality on input date field?

I'm using the following CSS only trick:

  input[type="date"]:before {    content: attr(placeholder) !important;    color: #aaa;    margin-right: 0.5em;  }  input[type="date"]:focus:before,  input[type="date"]:valid:before {    content: "";  }

<input type="date" placeholder="Choose a Date" />

JQuery placeholder HTML5 simulator

Try something like this:

$(function() {
    $('input[type="text"]').each(function () {
        $(this).focus(function () {
            if ($(this).attr('value') === $(this).attr('placeholder')) {
                $(this).css('text-transform','lowercase');
                $(this).attr('value', '');
            }
        }).blur(function () {
            if ($(this).attr('value') === '') {
                $(this).css('text-transform','uppercase');
                $(this).attr('value', $(this).attr('placeholder'));
            }
        }).blur();
    });
});

Edit: Explicitly declare the text-transform to cascade properly.

Animate placeholder text so it types MULTIPLE phrases

Check out my ES6 Promise based solution.
Hope this helps.

// Add something to given element placeholderfunction addToPlaceholder(toAdd, el) {    el.attr('placeholder', el.attr('placeholder') + toAdd);    // Delay between symbols "typing"     return new Promise(resolve => setTimeout(resolve, 100));}
// Cleare placeholder attribute in given elementfunction clearPlaceholder(el) {    el.attr("placeholder", "");}
// Print one phrasefunction printPhrase(phrase, el) {    return new Promise(resolve => {        // Clear placeholder before typing next phrase        clearPlaceholder(el);        let letters = phrase.split('');        // For each letter in phrase        letters.reduce(            (promise, letter, index) => promise.then(_ => {                // Resolve promise when all letters are typed                if (index === letters.length - 1) {                    // Delay before start next phrase "typing"                    setTimeout(resolve, 1000);                }                return addToPlaceholder(letter, el);            }),            Promise.resolve()        );    });} 
// Print given phrases to elementfunction printPhrases(phrases, el) {    // For each phrase    // wait for phrase to be typed    // before start typing next    phrases.reduce(        (promise, phrase) => promise.then(_ => printPhrase(phrase, el)),         Promise.resolve()    );}
// Start typingfunction run() {    let phrases = [        "Search Website e.g. \"Dancing Cats\"",        "Lorem ipsum dolor sit amet",        "Consectetur adipiscing elit",        "JS is so strange :)"    ];
    printPhrases(phrases, $('#search'));}
run();

.searchbar {    width: 300px;    padding: 10px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><!DOCTYPE html><html><head>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width">    <title>Bin</title></head><body>    <input type='text' id="search" class="searchbar" /></body></html>

JQuery UI Sortable - Add Placeholders to Lists to Simulate empty spaces

Sorry, this was a really difficult question to detail out. The requirements were really specific and hard to describe.

Here is the solution I was looking for.

The others answers here, while they may have been solutions to the poorly described problem, were not what I was looking for.

http://jsfiddle.net/vfezJ/

Unfortunately, the sortable.js code is very hairy so the code linked there is also very hairy. The solution I've posted also makes some assumptions on CSS classes and DOM ids to get the job done.

Firefox + Edge input placeholder opacity transition

Since there is no real cross browser solution to style and animate placeholder's, I decided to post an updated version from another answer of mine, where this one having both a label, a placeholder and a required asterisk.

I have added a tiny script with one purpose only, to replicate what is written in an input field to its attribute value.

With that, one can then use CSS alone for the actual styling and animations, by simply use the attribute selector [attribute="value"] (in the way I think most users expect it to be used)

(function(pls) {  /* run this script when page loaded */  window.addEventListener('load', function() {    /* find and iterate all "input placeholder" elements */    pls = document.querySelectorAll('.placeholder input');    for (var i = 0; i < pls.length; i++) {      /* attach a handler to replicate input value */      pls[i].addEventListener('input', function() {        this.setAttribute('value', this.value);      })    }  })})();

.placeholder {  position: relative;  padding-top: 15px;}.placeholder + .placeholder {  margin-top: 10px;}.placeholder label {  position: absolute;  left: 5px;  width: 100%;  top: calc(50.5% + 7.5px);  transform: translateY(-50.5%);  pointer-events: none;  font-size: 16px;  line-height: 16px;}.placeholder label::before,.placeholder label span {    position: relative;  top: 0;  transition: top .5s;}
/* the label text + asterisk */.placeholder input + label::before {  content: attr(data-text) ' ';   color: black;}.placeholder label span {  color: red;}.placeholder input:not([required]) + label span {  display: none;}.placeholder input:not([value=""]) + label::before,.placeholder input:focus + label::before,.placeholder input:not([value=""]) + label span,.placeholder input:focus + label span {  top: -22px;}
/* the placeholder text */.placeholder input + label::after {  content: attr(data-placeholder);   position: absolute;  left: 0; top: 0;  color: gray;  opacity: 0;  transition: opacity .5s .2s;}.placeholder input:focus + label::after {  opacity:  1;}.placeholder input:not([value=""]) + label::after {  opacity:  0;  transition: opacity .2s;}

<div class="placeholder">  <input type="text" name="name" value="">  <label data-text="Name" data-placeholder="Add your name"><span>*</span></label></div><div class="placeholder">  <input type="text" name="mail" value="" required>  <label data-text="Email" data-placeholder="Add your email address"><span>*</span></label></div>

Simulation of a Placeholder