web-dev-qa-db-ja.com

スペースバーを押してからJSコードを実行する

これはJavaScriptの私のコードです：

var changeIdValue =  function(id, value) {
document.getElementById(id).style.height = value;
};

document.getElementById ("balklongwaarde").addEventListener("click", function(){ changeIdValue("balklongwaarde", "60px")});

document.getElementById ("balklevensverwachting").addEventListener("click", function(){ changeIdValue("balklevensverwachting", "60px")});

document.getElementById ("balkhart").addEventListener("click", function(){ changeIdValue("balkhart", "60px")});

document.getElementById ("balklever").addEventListener("click", function(){ changeIdValue("balklever", "60px")});

document.getElementById("balkhersenen").addEventListener("click", function(){ changeIdValue("balkhersenen", "60px")});

キーアップを押した後にこのコードを実行したい...

誰もがどのようにアイデアを持っていますか？

javascriptkeyup
17
user3771096
document.body.onkeyup = function(e){
    if(e.keyCode == 32){
        //your code
    }
}

これはスペースバーを押した後に実行されます。

JSFiddle 。

43
nicael

JQueryでは、イベントは which イベントプロパティの下で正規化されます。

ここで任意のキー値を見つけることができますeg：spacebar value（32）。

この機能が役立つ場合があります。

$(window).keypress(function(e) {
    if (e.which === 32) {

        //Your code goes here

    }
});
7
NNR

document.activeElementは、要素がフォーカスされているものです。多くの場合、スペースバーとフォーカスされた要素の発射クリックを入力します。

document.body.onkeyup = function(e){
    if(e.keyCode == 32 || e.keyCode == 13){
        //spacebar or enter clicks focused element
        try {
            doc.activeElement.click();
        }
        catch (e) {
            console.log(e);
        }            
    }
};

その場合、CSSは次のようになります。

.focusable-thing:hover {
    cursor: pointer;
}
.focusable-thing:focus {
    -webkit-box-shadow: 0px 2px 8px 2px rgba(0,0,0,0.4);
    -moz-box-shadow: 0px 2px 8px 2px rgba(0,0,0,0.4);
    box-shadow: 0px 2px 8px 2px rgba(0,0,0,0.4);
}
2
Ron Royston

これの2019バージョンは次のようになります：（Chrome、Firefox、Safariのすべての主要なブラウザーで動作します）

仕様リンク- https://www.w3.org/TR/uievents/#dom-keyboardevent-code

codeは、押されている物理キーを識別する文字列を保持します。値は、現在のキーボードレイアウトまたはモディファイアの状態の影響を受けないため、特定のキーは常に同じ値を返します。この属性の初期化されていない値は、 ""（空の文字列）でなければなりません。

// event = keyup or keydown
document.addEventListener('keyup', (event) => {
  if (event.code === 'Space') {
    console.log('Space pressed')
  }
})
0
Catalin