JSでスペースをクリックしたときに、それ以降のイベントを実行したくない

Question

###実現したいこと
inputイベントでtextareaへの入力を拾って、そこにスペースが入力された場合に、スペース入力以外何もしたくないです。

###該当のソースコード
流れはこうです。スペース入力時は「実行しました」のアラートを出したくないんです。

<textarea></textarea>

<script>
$(document).on('input','textarea', function(){	
  
  //スペースのときは以下アラートを実行したくない

  alert('実行しました');

});
</script>

###試したこと
めっさいろいろ試しました。まず普通にスペースのキーコード32でreturnしましたが、できません。「実行しました」がしれっとでてきます。

$(document).on('input','textarea', function(e){	

  if(e.keyCode==32){ 
    alert('スペースなので実行しません');
    return;
  }

  alert('実行しました');

});

returnじゃダメかと思いpreventDefaultなるものを見つけましたが、やはりだめ！

$(document).on('input','textarea', function(e){	

  if(e.keyCode==32){ 
    alert('スペースなので実行しません');
    e.preventDefault();
  }

  alert('実行しました');

});

結局みつけたのがinputでなくkeydownにし、returnを使う方法です。（preventDefaultだとスペース入力がなくなってしまうためreturnにしました。）

これならスペースのときに「実行しました」はアラートされません。よっしゃ。

$(document).on('keydown','textarea', function(e){	

  if(e.keyCode==32){ 
    alert('スペースなので実行しません');
    return;
  }

  alert('実行しました');

});

しかし！keydownじゃなくてinputがいいんです。（keydownって何？って感じです。）

コメントボックスとかのためにkeydonwって使っていいんでしょうか？「input keydown 違い」で検索しても１つも出てきません…

思いっきりハマってまして、どうやったらいいと思いますか？

Answer 1

inputは一文字入力（あるいは削除）するたびに発生しますが、
テキストエリアには一文字しか入力しないという前提ですか？
だとしたら、下記のコードで。

$(document).on('input','textarea', function(e){    
  if(this.value===" "){ 
    alert('スペースなので実行しません');
  } else {
    alert('実行しました');    
  }
});

しかし！keydownじゃなくてinputがいいんです。（keydownって何？って感じです。）

keydown はキーボードで入力するたびに発生して、その時のキーコードを取得できます。

inputはテキストが変更されるたびに発生しますが、入力されたキーコードは取得できません。
this.value でテキストエリアのテキストを取得できます。

Comments

[kannmuri]

this.value知らなかったです。ありがとうございます。助かりました！

でもテキストエリアはコメントボックスなので、一文字しか入力しないという前提ではないです。

そしたら、keydownにするしかありませんか？一文字しか入らないという前提ではなく、かつスペースのときイベント実行したくないというなら、keydownにするしかないでしょうか？

ずっとinputでやってきたので、変えると予期しないことがおこりそうでなんか不安です。コメントボックスなどではinputとkeydownはどちらがいいと思いますか？ふつうinputですよね？そりゃ、仕様によるでしょうけど、どうでしょうか？

[hatena19]

ご希望のことの具体的な仕様を提示してもらえませんか。
一文字入力するたびにメッセージを表示するということは、ご希望のこととは違いますよね。

inputはテキストが変化したときにリアルタイムにそのテキストを取得するというのが主な用途です。
キー入力を監視するなら、keydown か keyup か keypress を使うのが通常です。
keydown, keyup は Ctrl とか Shift など文字を出力しないキーでも発生しますが、keypress は文字を出力するキーのときのみ発生します。

やりたいことが不明なので、どれが適切かは判断できません。

[kannmuri]

>一文字入力するたびにメッセージを表示するということは、ご希望のこととは違いますよね。

いやー、まさにそれがしたかったです。質問用の簡単な例としてアラートにしただけで、実際は「スペースが入力された場合に、スペース入力以外何もしたくない」ということだったんです。すいません表現が難しかったです。夜分にありがとうでした。

とりあえず何か特殊なこと（キーコードを取得するとか）をもくろんでなければ、コメントボックスの入力時のイベント起こすならinputを使っておくのがセオリーって感じですよね？

Answer 2

jQuery が独自にイベントオブジェクトを拡張していて、その中に入力値をもつプロパティがありました。キーイベントと違い、キーコードを取得できるわけではないので、全角/半角対応等は自分でするしかありません。

$( document ).on( 'input', 'textarea', function( e ) {    
  if ( e.originalEvent.data==' ' ) { 
    console.log('スペースなので実行しません');
    return;
  }
  console.log('yes');
} );
```**動くサンプル：**[https://jsfiddle.net/92qaLwbs/](https://jsfiddle.net/92qaLwbs/)

---

【Event Object | jQuery API Documentation】
[https://api.jquery.com/category/events/event-object/](https://api.jquery.com/category/events/event-object/)

Comments

[kannmuri]

おお~！どうもありがとうございます????