テキストエリアでの改行削除について、貼り付け対策が上手くいきません

Question

teetareaで改行を禁止したいのですが、貼り付け対策がうまくいきません。

ご注目いただきたいのは、下記のJSでコメントアウトしてある部分です。

「改行があったらそれを削除する」という意図で書いているのに、これがあるとテキストが入力できなくなってしまいます。

どうすれば貼り付け対策もできるでしょうか？

実際のサンプル：https://jsfiddle.net/t0z67sba/

<textarea class="cancelEnter">ここは改行禁止</textarea>

<script>
$('.cancelEnter').bind('input keydown keyup keypress change',function(e){
    if (e.which == 13) {
        return false;
    }
   // 貼り付け対策のための次の改行削除コードを書くと、テキストが入力できなくなる
    var replace_br = $(this).text().replace(/\r?\n/g,"");
    $(this).text(replace_br);
})
</script>

<style>
textarea {width: 100%;height: 300px;}
</style>

###確認した環境
firefox最新
chrome最新

Answer 1

入力値は value プロパティ(jQueryの.val())を参照してください。

    var target = $(this);
    target.val(target.val().replace(/\r?\n/g,""));

Answer 2

contenteditableはブラウザによって実装が異なるので
仕様をある程度ご自身で調べられないなら
素直にinputやtextarea系の処理を利用することをお勧めします

とりあえず
「一文字ずつエンターを押さないと入力できない」状況が確認できませんので
ご利用のOSやブラウザの種類やバージョンを提示されたほうがよいでしょう

textarea

textareaでやるならこう

<script>
$(function(){
  $('.cancelEnter').on('input',function(){
    var txt=$(this).val();
    if(txt.match(/[\r\n]/)){
      $(this).val(txt.replace(/[\r\n]/g,''));
    }
    console.log(txt);
  });
});
</script>
<textarea class="cancelEnter">ここは改行禁止</textarea>

Comments

[chacky]

そもそもテキストエリアでもできないので、質問を修正しました。