字型输入（阴影打字）

Question

我目前正致力于一个处理语言学习的项目（即德语，中文等...）特别是我们遇到问题的一个功能 - 简而言之，我们正试图展示“幽灵” “文字（非常模糊的灰色）并允许用户键入此文本。

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

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

我们目前已经实现了一个使用典型HTML表单的系统，覆盖在用户应该重复输入的文本的顶部。通过CSS和原始手动定位表单。我在下面附上了一张图片，以了解我们目前拥有的内容（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

Answer 2

让自己成为一个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>