質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.38%

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

解決済

回答 2

投稿

  • 評価
  • クリップ 1
  • VIEW 804

score 42

実現したいこと

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 違い」で検索しても1つも出てきません…

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+2

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

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

しかし!keydownじゃなくてinputがいいんです。(keydownって何?って感じです。)

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/10/18 03:02

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

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

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

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

    キャンセル

  • 2019/10/18 03:15 編集

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

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

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

    キャンセル

  • 2019/10/18 03:27

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

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

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

    キャンセル

checkベストアンサー

+1

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

$( document ).on( 'input', 'textarea', function( e ) {    
  if ( e.originalEvent.data==' ' ) { 
    console.log('スペースなので実行しません');
    return;
  }
  console.log('yes');
} );

動くサンプル:https://jsfiddle.net/92qaLwbs/


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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/10/18 03:21

    おお~!どうもありがとうございます🌙

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.38%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る