javascript - 打字(影子打字)

Question

我目前正在从事一个处理语言学习(即德语、中文等...)的项目，其中有一个功能我们遇到了问题 - 简而言之，我们正在尝试显示“幽灵” "文本(非常淡的灰色)并允许用户键入覆盖此文本。

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

我认为这最好通过某种 Javascript 来完成？

我们目前已经实现了一个系统，该系统使用典型的 HTML 表单，覆盖在用户应该重复输入的文本之上。通过 CSS 和 crude 手动定位表单。我在下面附上了一张图片，以了解我们目前拥有的内容(3 个手动编码并放置在静态文本之上的 HTML 表单)。

Answer 1

我想到了一个不同的解决方案，只使用 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