好きなだけかりんとうを食べる人生

フロントエンドとかデザインとかバックエンドとか浅く広く。社会人3年目のうぇぶでぃれくたーです。

Javascriptを使ってテキストフィールドの内容をリアルタイムで表示させる

これまたお仕事関係で使いそうなので先回りでコードを書いてみました。

コード

chrome想定

<textarea id="text"></textarea>
<div id="output"></div>
window.onload = function() {

    var txtEl = document.getElementById('text'),
        outputEl = document.getElementById('output');

    txtEl.addEventListener('keyup', function() {

        var txt = txtEl.value;
        outputEl.innerHTML = txt;

    }, false);

}

サンプル

ポイント

keyupイベントを指定するとキーを離したタイミングでイベントを発火させることができます。
あとはtextareaの入力内容はvalueプロパティで取得することに注意するくらいでしょうか。

まとめ

AngularJS使えば一瞬じゃんとか言わないでください(・∀・)