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

Question

Usually when we use input placeholder, the placeholder text will disappear as soon as the user type something.

I'm thinking to give user an random example on input so user can mimic using placeholder. The problem is that, when user type something, the example will disappear. Is there any way to keep the placeholder visible when user type the beginning part of the placeholder text?

Here's an example

The placeholder text is 'Lorem ipsum dolor sit amet'. When user types 'Lorem ipsum', I assume that user will try to type the example so the text will still be visible. But when user types something else like 'Lorem dolor', I assume user will try to type something different from the example. But if it turns out the user pressed wrong button, the placeholder text will be visible again after user pressed 'backspace' until the input text becomes the placeholder part again (e.g. user delete the 'dolor' text and the input text is back to 'Lorem').

Actually currently I use autocomplete dropdown as alternative, but I feel curious whether this can be done using Javascript (preferably jQuery).

UPDATE

This is as far as I can get. I'm thinking of cloning an element with same style as the text input.

Something like this

var textinput = $('#textinput');
var textplaceholder = $('<span>');
var placeholdertext = textinput.attr('placeholder');
textinput.attr('placeholder', '');

textplaceholder.insertAfter(textinput);
textplaceholder.html(placeholdertext);
textplaceholder.copyCSS(textinput);

textinput.keyup(function() {
    var current = $(this).val();
    if(placeholdertext.substr(0, current.length) == current){
        textplaceholder.html(placeholdertext);
    } else {
        textplaceholder.html(current);
    }
});

Here's the fiddle http://jsfiddle.net/petrabarus/FDS88/

The problem is how to make the element appear right behind the input text, make the text looks align in every browser, and mimic the mouse interaction (i.e. the border glow when the text is on focus, etc)?

Answer 1

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.}