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 bees the placeholder part again (e.g. user delete the 'dolor' text and the input text is back to 'Lorem').

Actually currently I use autoplete 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 /

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)?

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 bees the placeholder part again (e.g. user delete the 'dolor' text and the input text is back to 'Lorem').

Actually currently I use autoplete 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/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)?

• javascript
• jquery
• html
• css

• Place a div behind the textbox to create that effect. However there are many ways doing this, such as making a span with contentEditable enabled and place your gray text after it: jsfiddle/DerekL/7sD2r – Derek 朕會功夫 Commented Apr 30, 2014 at 5:14
• @Derek: This is actually a very decent idea, the value can be put inside a hidden input. – Petra Barus Commented Apr 30, 2014 at 5:19
• @PetraBarus - The whole thing pleted: jsfiddle/DerekL/7sD2r – Derek 朕會功夫 Commented Apr 30, 2014 at 5:21

2 Answers 2

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/DerekL/7sD2r/

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

you can try using this code... or this way

look at this code:

fiddle

html

<div id="main">
    <input TYPE="TEXT" id="in1"/>
    <div id="back"> sanmveg</div> 

</div>

css

    #back{
    //background-color:#ccc;
    width:200px;
    height:22px;
    margin-top:-21px;
    margin-left:4px;
    font-family:arial;
    font-size:13px;
}

#main{
    width:200px;
    height:20px;
}

#in1{
    //background-color:#EEE;
    opacity:.7;
    font-family:arial;
}

you know i have just used html and css to do the thing you want.

explanation

you know i have used html and css. the opacity of the input box is not much and it is over a div box with some text in it and the div tag is placed in such a way that when the user type some text in the input box then the text in div is just at the position of the cursor