键入单词（阴影打字）

Question

我目前正在研究一个处理语言学习的项目（即：德语，中文等...），我们遇到了一些问题 - 特别是，我们正在尝试显示“幽灵”文本（非常微弱的灰色），并允许用户键入该文本。

该项目将有几千个不同的句子来输入，因此生成某种动态的“就地编辑”是理想的。

我认为这将是最好的通过某种类型的Javascript完成？

我们目前已经实现了一个系统，该系统使用典型的HTML表单，叠加在用户应该重复键入的文本的顶部。表单通过CSS和粗略手动定位。我在下面附上了一张图片，以说明我们目前拥有的内容（3个手动编码并放置在静态文本上的HTML表单）。

Answer 1

让自己成为一个jQuery插件。 http://jsfiddle.net/ppuGL/

$.fn.typeOverText = function() { 
    var $ = jQuery, 
     $this = $(this); 

    $this.addClass('type-over'); 
    $this.append('<input type="text" class="type-over-input">'); 

    return $this; 
} 

一些HTML：

<span class="text">Type over me</span> 

调用插件：

$('.text').typeOverText(); 

和一些CSS：

.type-over { 
    position: relative; 
    color: #ccc; 
    display: inline-block; 
    padding: 5px; 
} 

.type-over-input { 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    background-color: transparent; 
    font-family: inherit; 
    font-size: inherit; 
    border: none; 
    margin: 0; 
    padding: 0; 
    padding-left: inherit; 
    padding-right: inherit; 
} 

.type-over-input:focus { 
    outline: 1px solid #ccc; 
} 

附录

受brbcoding的启发，这是另一个仅限CSS的想法。 http://jsfiddle.net/trevordixon/ppuGL/1/

<span data-shadow-text="Type over me"> 
    <input> 
</span> 

<style> 
[data-shadow-text] { 
    font-family: sans-serif; 
    font-size: 24px; 
    position: relative; 
    padding: 5px; 
    display: inline-block; 
} 

[data-shadow-text]:before { 
    content: attr(data-shadow-text); 
    position: relative; 
    color: #ccc; 
    display: inline-block; 
} 

[data-shadow-text] input { 
    position: absolute; 
    left: 0; 
    top: 0; 
    background-color: transparent; 
    font-family: inherit; 
    font-size: inherit; 
    border: none; 
    margin: 0; 
    padding: inherit; 
    padding-left: inherit; 
    padding-right: inherit; 
    width: 100%; 
} 

[data-shadow-text] input:focus { 
    outline: 1px solid #ccc; 
} 
</style> 

Answer 2

我想到了一个不同解决方案，只使用CSS和一些很酷的HTML5的东西。

HTML

<!--// first we create a container to hold our boxes //--> 
<div class="container"> 
<!--// we will use divs instead of inputs with the contenteditable attribute set to true --> 
<!--// we will also take advantage of the data-* attribute in html5 w/ content: attr(data-word) //--> 
<div data-word="Foo" contenteditable="true"></div> 
<div data-word="Bar" contenteditable="true"></div> 
<div data-word="Baz" contenteditable="true"></div> 
</div> 

CSS如果用户输入错误

/* just some basic layout stuff, do what you want with this */ 
.container { 
    position: relative; 
    width: 100%; 
} 
div { 
    position: relative; 
    display: inline-block; 
    width: 25%; 
    z-index: 0; 
} 

/* absolutely position the pseudo-element :after so it sits right behind the div */ 
/* set the z-index to -1 so that we can type over it -- change the color as needed */ 
div:after { 
    position: absolute; 
    top: 0; 
    left: 0; 
    content: attr(data-word); 
    z-index: -1; 
} 

DEMO