質問

現在、言語学習（ドイツ語、中国語など）を扱うプロジェクトに携わっていますが、特にある機能で問題があります。

このプロジェクトでは、数千の異なる文章を入力することになるので、ある種の動的な「その場での編集」を生成することが理想的です。

これは、ある種のJavascriptで行うのがベストでしょうか？

現在、一般的なHTMLフォームを使用し、ユーザーが繰り返し入力すべきテキストの上に重ねて表示するシステムを導入しています。フォームの位置はCSSとcrudeで手動で決めています。現在あるもの（静的なテキストの上に手作業でコーディングされ配置された3つのHTMLフォーム）のイメージを伝えるために、下に写真を添付しました。

解決方法は？

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>