输入文字（阴影打字）

Question

我目前正在从事一个处理语言学习（即德语、中文等）的项目，其中一个功能特别是我们遇到了问题 - 简而言之，我们正在尝试显示“ghost " 文本（非常淡的灰色）并允许用户在此文本上键入。

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

我认为这最好通过某种 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>