当用户键入占位符文本的第一个子字符串时，如何使占位符可见 [英] 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.

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

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?

这是一个例子

占位符文本为"Lorem ipsum dolor sit amet".当用户键入"Lorem ipsum"时，我假设用户将尝试键入示例，因此文本仍然可见.但是，当用户键入诸如"Lorem dolor"之类的其他内容时，我认为用户将尝试键入与示例不同的内容.但是，如果事实证明用户按下了错误的按钮，则在用户按下退格"键之后，占位符文本将再次可见，直到输入文本再次成为占位符部分为止(例如，用户删除"dolor"文本，而输入文本又回到了"").

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').

实际上，我目前使用自动完成下拉列表作为替代，但是我很好奇这是否可以使用Javascript(最好是jQuery)完成.

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

更新

据我所知.我正在考虑克隆与文本输入样式相同的元素.

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

类似这样的东西

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/

问题是如何使元素出现在输入文本的正后方，如何使文本在每个浏览器中看起来都对齐，并模仿鼠标的交互作用(例如，当文本处于焦点时边框发光)，等等?

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

推荐答案

有很多方法可以达到这种效果.这是一种实现方式:

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/

_{关于NO-BREAK空间，请参见此处.}

这篇关于当用户键入占位符文本的第一个子字符串时，如何使占位符可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！