form入力内容をリアルタイム表示する時のセキュリティと改行、textareaのfloatについて

Question

こんにちは、どうぞ宜しくお願い致します。

JavaScript使用して、formの入力内容を同一画面にリアルタイム表示したいと考えています。
イメージとしては、teratailの質問投稿画面のように、左の入力画面で入力した内容が、右に表示される形です。

そこで、質問が2つあります。

【1】画面にリアルタイム表示する際に必要なセキュリティは、通常どのようなものが考えられますか？
PHPなどでは、htmlspecialchars()などがありますが、それに似たようなセキュリティを施す必要がありますか？

【2】画面にリアルタイム表示する際に、入力内容の改行も反映したいと思っています。下記のコードを使用するとしたら、どうすれば実現可能でしょうか？

使用するコードは、下記の通りです。

<div><input id="input" type="text"></div>
<div>Input: <span id="output"></span></div>
<div>Change: <span id="output2"></span></div>

$(function() {
  var $input = $('#input');
  var $output = $('#output');
  $input.on('input', function(event) {
    var value = $input.val();
    $output.text(value);
  });
  
  
  var $output2 = $('#output2');
  $input.on('change', function(event) {
  	$output2.text($input.val());
  });
});

【3】また、上記内容とは少し離れるのですが、textareaは、下記の画像のようにfloatできますか？

このあたり、初心者のためお教えいただければ幸いです。
どうぞ宜しくお願い致します m(_ _)m

Answer 1

1. $output.text(value); ならテキストしか入らないので特に問題は起きません。

2. 一度要素を $output.text(value); として追加した後、中身を変数に取り出して改行コードを<br>に置換して$output.html(res);良いです。

3. 残念ながら無理です。テキストエリアは変形できません。

【JavaScriptで改行コードを<br>に置換する - ノンカフェインであなたにやさしい】
http://akinov.hatenablog.com/entry/2014/09/16/235554

Comments

[yy_hatena]

ご返事が遅くなってしまい申し訳ございません。
詳しいご回答ありがとうございます。とても役に立ちました！