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

问题

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

enter image description here

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

enter image description here

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

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

回答2:

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

来源：https://stackoverflow.com/questions/23377319/how-to-keep-placeholder-visible-when-user-is-typing-first-substring-of-the-place

标签

javascript

jquery

html

css