jsでインタラクティブなプレビュー画面を作りたい

Question

cakephp３で表示している入力フォームについて、送信ボタンを押さずともプレビュー画面が出るようにしたいです。ちょうどteratailの質問入力フォームのようにしたいです。
jQueryで実現したいのですが、どのように作ったらいいでしょうか？調べてもこれといったものが出てこずやり方がわからないので、大雑把な流れでもいいので教えていただきたいです。

【追記】
以下のような入力フォームがあり、メールアドレスとコメントを入力し、送信ボタンを押すとメールが送信されるようになっています。
メール本文は定型文で決まっているのですが、コメントをつけ加えることができる仕様です。
そのため、送信ボタンを押す前に入力されたコメントと定型文を合体したものをインタラクティブに表示したいと思っています。よろしくお願いします。

ソースコードはcakephpになりますが、載せておきます。

<div class="block-mb-sm">
    リンク送付先のメールアドレスを入力してください。
</div>
<?= $this->Flash->render() ?>
<?= $this->Form->create($shareByEmail) ?>
<?= $this->Form->input('email', [
    'class' => 'js-email',
    'label' => [
        'text' => 'メールアドレス' . $this->Html->icon('asterisk', ['class' => 'text-danger mandatory']),
        'escape' => false,
    ],

    ])
?>
<?= $this->Form->textarea('comment', [
    'class' => 'js-text',
    'label' => [
        'text' => 'コメント',
        'escape' => false,
    ],

    ])
?>
<div class="text-center">
    <?= $this->Form->button('送信', [
            'type' => 'button',
            'class' => 'primary btn-submit',
            'id' => 'js-submit-button',
        ])
    ?>
</div>
<?= $this->Form->end() ?>

Comments

[miyabi_pudding]

どのような入力フォームで、どのような表示画面にしたいかによってやり方も変わってきますが・・・。
ソースコードのHTMLと、画像で、どのようなプレビュー画面にしたいか、を提示ください。
ちなみに、teratailの場合は、入力内容から、マークダウン記法を変換したものを表示する関係上、
プレビューを表示させているものと思います。
つまり、表示させたい内容によってはプレビューそのものが必要ない可能性があるということです。

Answer 1

大雑把な流れでもいい

• ボタンのイベントに割り込ませ、プレビュー表示する。
• 表示する際、定型文データ(サーバー側？)にフォームのタイトル・コメントを差し込む。
• プレビュー内容のHTMLを動的に生成して（モーダルなどで）表示する。
• モーダルの結果を受けて 送信/中断 できるようにする。

追記）モーダルを使わず、キーボードイベントに反応させて画面上で表示するのがベターですね。

「サーバー側の定型文データをフロント側でも扱えるようにする」のがポイントかと思います。

1. サーバー側にAPIを実装し、JSONで扱う（一般的な手法なので割愛）
2. script要素を活用して定型文データをHTMLに持たせて応答しておき、文字列処理する。

<script type="text/plain" id="fixed-phrase">

定型文

</script>

jQuery で var fixedPhrase = $("#fixed-phrase").text(); のように定型文を取得できると思います。

ページの応答時に script 要素に仕込む手法は、応答時に挿し込んでおくだけの簡単な実装になります（古典的な手法ではあります）。
尚、base64 などの復号できるアルゴリズムで符号化しておくと、ソースを見られても一見して何のデータかを直ぐに判別されないと思います。

Answer 2

ただしこのままだとフォームにhtmlタグが書き込まれた場合エスケープされない

// プレビュー表示
        $(document).on('keyup', '#js-comment', function(){
            var comment = $("#js-comment").val();
            // 改行のための処理
            comment = comment.replace(/\r\n/g, '\n');
            comment = comment.replace(/\r/g, '\n');
            var lines = comment.split('\n');
            var prettyComment = lines.join('<br>');
            $('#js-input-comment').text(prettyComment);
        });