当用户键入占位符文本的第一个子字符串时，如何保持占位符可见

Question

通常当我们使用输入占位符时，占位符文本会在用户输入内容后立即消失。

我想给用户一个关于输入的随机示例，以便用户可以使用占位符来模仿。问题是，当用户输入内容时，示例将消失。当用户键入占位符文本的开头部分时，有没有办法让占位符可见？

这是一个例子

占位符文字是Lorem ipsum dolor sit amet＆＃39;。当用户输入＆＃39; Lorem ipsum＆＃39;时，我假设用户会尝试输入示例，以便文本仍然可见。但是当用户输入其他类似Lorem dolor＆＃39;之类的内容时，我假设用户会尝试输入与示例不同的内容。但是，如果用户按错了按钮，则在用户按下退格键后，占位符文本将再次显示。直到输入文本再次成为占位符部分（例如，用户删除＆＃39; dolor＆＃39;文本，输入文本返回到Lorem＆＃39;）。

实际上目前我使用自动完成下拉作为替代，但我感到好奇是否可以使用Javascript（最好是jQuery）来完成。

更新

这是我能得到的。我想克隆一个与文本输入风格相同的元素。

像这样的东西

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);
    }
});

这里是小提琴http://jsfiddle.net/petrabarus/FDS88/

问题是如何使元素出现在输入文本的正后方，使文本看起来在每个浏览器中对齐，并模仿鼠标交互（即文本在焦点上时边框发光等）？

Answer 1

有很多方法可以达到这种效果。这是一种方法：

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

_{关于NO-BREAK SPACE，请参阅here。}

Answer 2

您可以尝试使用此代码......或者这样

看看这段代码：

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

你知道我刚刚使用html和css来做你想做的事情。

解释

你知道我使用过html和css。输入框的不透明度并不大，它位于div框中，其中包含一些文本，div标签的放置方式是当用户在输入框中键入一些文本时，div中的文本只是在光标的位置