2

フォーム要素の外部でのみキーイベントをトリガーすることは可能ですか？

背景：右のキーが押されたときに次のページをロードするコードがあります。しかし、誰かがフォーム要素でそのキーを使用している場合、そのイベントをトリガーしたくありません。

現在のコード：

$(document).keydown(function(e){
    if (e.keyCode == 37) { 

        var url = $('a#left').attr("href");

        if (url != '') { // require a URL
                window.location = url; // redirect
        }

    return false;
    }

    if (e.keyCode == 39) { 

        var url = $('a#right').attr("href");

        if (url != '') { // require a URL
                window.location = url; // redirect
        }

    return false;
    }
});
4

2 に答える 2

2

これが概念の基本的な例です。ドキュメントにイベントハンドラーを追加し、そのターゲットにフォームである親がないことを確認するだけです。

HTML

<form>
    Inside form
    <input/>
</form>
Outside form
<input />

Javascript

    $(document).keyup(function(event){
        if($(event.target).parents("form").length == 0){
           alert("here");
        }
    });

作業中のPOC：http: //jsfiddle.net/48NYE/

この概念は、提供したスクリプトに簡単に適用できます。

スクリプトの変更

$(document).keydown(function(e){
    var outsideForm = $(e.target).parents("form").length == 0;
    if (e.keyCode == 37 && outsideForm) { 

        var url = $('a#left').attr("href");

        if (url != '') { // require a URL
                window.location = url; // redirect
        }

    return false;
    }

    if (e.keyCode == 39  && outsideForm){ 

        var url = $('a#right').attr("href");

        if (url != '') { // require a URL
                window.location = url; // redirect
        }

    return false;
    }
});
于 2013-03-25T09:35:20.437 に答える
2

フォームの外に他のフィールドがある場合、これは非常に役立つかもしれません。

LIVE DEMO

document.onkeyup = function( ev ){

  var key = ev.which || ev.keyCode ,
      aID = { 37:"left", 39:"right" }; 

  if( ! (/INPUT|TEXTAREA/i.test(ev.target)) && aID[key]) {
     var url = document.getElementById( aID[key] ).getAttribute('href');
     window.location = url;
  }

};
于 2013-03-25T09:50:02.347 に答える