Javascript addEventListenerを使ってテキストエリア（textarea）の入力イベントを実装する
環境
Windows 10 Home 64bit
Google Chrome 109.0.5414.120
書式
1.テキストエリアの内容の取得
let 変数名 = document.querySelector('textarea’);
変数名.value
2.addEventListenerを使ってイベントを登録する
変数名.addEventListener('keyup’,()=>{処理コード
イベントはaddEventListener()に「keyup」を指定してテキストエリアの中身を取得し出力エリアに出力します。
使用例
<!DOCTYPE html>
<html>
<body>
<textarea name="example" cols="25" rows="6"></textarea>
<div class="res">入力内容：</div>
<script>
let cft = document.querySelector('textarea');
// キーが離された場合addEventListenerを利用
cft.addEventListener('keyup',()=>{
//テキストエリアの内容をdiv要素resに出力
document.querySelector('.res').innerHTML = cft.value;
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<textarea name="example" cols="25" rows="6"></textarea>
<div class="res">入力内容：</div>
<script>
let cft = document.querySelector('textarea');
// キーが離された場合addEventListenerを利用
cft.addEventListener('keyup',()=>{
//テキストエリアの内容をdiv要素resに出力
document.querySelector('.res').innerHTML = cft.value;
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<textarea name="example" cols="25" rows="6"></textarea>
<div class="res">入力内容：</div>
<script>
let cft = document.querySelector('textarea');
// キーが離された場合addEventListenerを利用
cft.addEventListener('keyup',()=>{
//テキストエリアの内容をdiv要素resに出力
document.querySelector('.res').innerHTML = cft.value;
});
</script>
</body>
</html>
結果
テキストエリアに「arkgame」と入力すると、「入力内容：」をarkgameに置き換えます。