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

Question

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

我正在考虑给用户一个关于输入的随机示例，以便用户可以使用占位符进行模仿。问题是，当用户键入某些内容时，该示例将消失。当用户键入占位符文本的开头部分时，有什么方法可以使占位符保持可见？

这是一个例子

占位符文本是“Lorem ipsum dolor sit amet”。当用户键入“Lorem ipsum”时，我假设用户将尝试键入示例，以便文本仍然可见。但是当用户输入像“Lorem dolor”这样的其他内容时，我假设用户会尝试输入与示例不同的内容。但是，如果结果是用户按下了错误的按钮，则在用户按下“退格”后，占位符文本将再次可见，直到输入文本再次成为占位符部分（例如，用户删除“dolor”文本并且输入文本返回到“ Lorem')。

实际上我目前使用自动完成下拉菜单作为替代，但我很好奇这是否可以使用 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 中的文本就在光标的位置