web-dev-qa-db-ja.com

JQuery:Keyup、矢印のデフォルトの動作(上下)を防ぎ、キーを入力するにはどうすればよいですか?

JavaScript(JQuery)

$('input').keyup(function(e)
{
    var code = e.keyCode ? e.keyCode : e.which;

    switch(code)
    {
        case 38:
        break;

        case 40:
        break;

        case 13:
        break;

        default:
        return;
     }
 });

[〜#〜] html [〜#〜]

<form method="post" action="/">
<input type="text" name="text" />
<button type="submit">Submit</button>
</form>

2つの問題があります。

1)p矢印キーを押してもキャレットは移動しないはずです。

たとえば、Chromeでアップキーを押すと、キャレットが左に移動します。ただし、この問題はChromeでのみ発生します。FFでは正常に動作します。

2)enterキーを押したときに、フォームを送信したくありません。

ところで、私はこれをkeypressではなくkeyupで動作させたいと思っています。

任意のアイデアをいただければ幸いです。ありがとう。

14
user317005

keyupイベントで preventDefault() (ブラウザがキーのデフォルトアクションを実行するのを停止するために使用する必要があるもの)とは思わない-発生afterデフォルトのイベントはすでに発生しています。詳細は このページ を参照してください。

可能であれば、代わりにkeydownの使用を検討してください。

フォームの送信を停止することに関しては、送信ボタンによって送信がトリガーされなかった場合に submit event およびreturn false;にバインドできます( jQuery:を取得する方法を参照)フォームの送信時にボタンがクリックされましたか? これを確認する方法について)。

一方、フォームのkeypressにバインドして、 Enter が押された場合、同じ方法で送信をキャンセルします(テストされていないコード):

$('form').keypress(function(e){
    if(e.which === 13){
        return false;
    }
});
48

ブレークの代わりにfalseを返すか、関数を呼び出して http://api.jquery.com/event.preventDefault/ を使用することができます

例:case 40: function(e) {e.preventDefault;}

また、$('form').submit(function() {return false});は送信を完全に停止しますが、あなたが何を求めているのかわかりませんか?

0
thugsb

ユーザーがEnterキーを押したときにフォームが送信されないようにするには、フォームの送信関数をバインドし、イベントトリガーがEnterボタンが押された場合にfalseを返す必要があります。

上/下ボタンを押すには、e.preventDefault();を使用します

0
devmatt

Keyup()を使用しているときに「ENTER」のデフォルトを実際に停止できるようです。 ... jQuery apiはそれ自体をここに書き込みます http://api.jquery.com/keyup/

ここにあなたがしなければならない方法があります:

$('textarea').keyup(function(e) {
   // your code here
}).keydown(function(e){
   // your e.which for ENTER.
});
0
skolind

最も信頼できる方法は、e.preventDefault()e.stopPropagation()およびreturn falseの組み合わせです。

これは次のようになります。

var override_keys = [13, 38, 40];

$('input').keyup(function(e){
  var code = e.keyCode ? e.keyCode : e.which;

  if ($.inArray(code, override_keys)) {
    e.preventDefault();
    e.stopPropagation();
    return false;
  }
});

また、フォームがEnterキーで送信されないようにするには、フォームのsubmitイベントを確認する必要があります。

$('#form').submit(function(e){
  var code = e.keyCode ? e.keyCode : e.which;

  if ($.inArray(code, override_keys)) {
    return false;
  }
});
0
Alex Weber