Enterキーが無効になっているフォームの中のtextareaでの改行

Question

<form action="" method="post" onkeydown="if(event.keyCode == 13){return false;}">
　・
　・
　・
</form>

フォーム全体に対してEnterキーが無効になっています。（上記onkeydownは都合上変更できません）
このフォームの中のある一つのtextareaでのみEnterキーを有効にしたい（改行できるようにしたい）場合、どうすればよいでしょうか？

Answer 1

対象の <textaera> に keydown イベントリスナーを登録して、その中でイベントの stopPropagation() を呼んでください。
イベントが先祖要素までバブルしなくなり、<form>のonkeydownが呼ばれなくなります。

Comments

[kiwsr]

ご回答いただきありがとうございます。
今回は他の方にアドバイスいただいた別の方法で解決できましたが、教えていただいたこちらの方法も大変勉強になりました。
誠にありがとうございました。

Answer 2

ホワイトリストかブラックリストで処理するとよいでしょう

<form action="" method="post" onkeydown="if(!['textarea','submit'].includes(event.target.type) && event.keyCode == 13){return false;}">
<input type="text">
<input type="checkbox">
<textarea></textarea>
<input type="submit" value="send">
</form>

ただしformにイベントリスナーを直接書くのはおすすめしないのでjsを分離したほうがよいでしょう

追加処理

document.addEventListener('keydown',e=>{
  const selection = getSelection();
  const t=e.target;
  if(t.closest('textarea')){
    const v=t.value;
    const s=t.selectionStart;
    if(e.keyCode == 13){
      e.preventDefault();
      t.value=v.substring(0,s)+"\n"+v.substring(s);
      t.selectionStart=s+1;
      t.selectionEnd=s+1;
    }
  }
});

Comments

[kiwsr]

回答ありがとうございます。
説明不足で大変申し訳ございません。
form要素やその中の各要素のHTMLは、要件上一切編集ができないので、追加のJavascriptのみでtextareaだけEnterを有効にしたいのですが可能でしょうか？

[yambejp]

js追加方式の処理の仕方を書いておきました

[kiwsr]

追加のご回答誠にありがとうございます。
おかげさまで完璧に解決することができました。
ありがとうございました。

Answer 3

恐らく一番シンプルに、その「有効にしたい」以外の要素を一つ一つ無効にしていく方が確実かと思います。

Jqueryを利用すればclassを追加するだけで簡単に切り替えができます。

<textarea class="offenter"></textarea>
<textarea></textarea>
<script>
 //Jqueryを読み込む必要があります
 $('.offenter').on('keydown',function (e) {
  if (e.key == 'Enter') {
   return false;
  }
 });
</script>

Comments

[kiwsr]

回答ありがとうございます。
説明不足で大変申し訳ございません。
form要素やその中の各要素のHTMLは、要件上一切編集ができないので、追加のJavascriptのみでtextareaだけEnterを有効にしたいのですが可能でしょうか？