Javascript Jqueryを使わずにマウスをクリックしたときのキー入力

このWebサイトでは多くの結果が見つかりましたが、すべてJqueryを使用しているようです。私は本当にJqueryなしでそれを行う方法を知る必要があります。私が望むのは、ボタンをクリックして、ALT + NやCTRL + Gのようなキーストロークを発生させることです。ありがとう。Javascript Jqueryを使わずにマウスをクリックしたときのキー入力

出典

2017-07-01 Hasen

KeyboardEventコンストラクタを見てください。ブラウザがHTMLを解析し、それはすぐにそれでJavaScriptを実行し、<script>タグに達すると

document.addEventListener('DOMContentLoaded', function() { 
 
    document.getElementById('alt-n').addEventListener('click', function() { 
 
    // create a new keyboard event 
 
    var event = new KeyboardEvent('keydown', { 
 
     key: 'n', 
 
     altKey: true 
 
    }); 
 
    // dispatch the alt+n key press event 
 
    document.dispatchEvent(event); 
 
    }); 
 

 
    document.getElementById('ctrl-g').addEventListener('click', function() { 
 
    // create a new keyboard event 
 
    var event = new KeyboardEvent('keydown', { 
 
     key: 'g', 
 
     ctrlKey: true 
 
    }); 
 
    // dispatch the ctrl+g key press event 
 
    document.dispatchEvent(event); 
 
    }); 
 

 
    // listen for any key presses 
 
    document.addEventListener('keydown', function (e) { 
 
    if (e.altKey || e.ctrlKey) { 
 
     // alt or ctrl is pressed 
 
     console.log('Key: ' + e.key + '; alt pressed: ' + e.altKey + '; ctrl pressed: ' + e.ctrlKey); 
 
    } 
 
    }); 
 
});

<button id="alt-n">alt+n</button> 
 
<button id="ctrl-g">ctrl+g</button>

編集

：あなたはこのようにそれを使用することができます。ただし、残りの文書はまだ読み込まれていないことがあります。

これは、ページ内の一部のHTML要素がまだ存在しないため、JavaScriptでアクセスできないことを意味します（document.getElementByIdは、要素を見つけることができず、プロパティを読み取れない場合はnullを返します） nullから）。

要素が読み込まれるまで待つ必要があります。もちろん、あなたが関数を作成し、onclickインラインハンドラでそれを呼び出すことができます。

function dispatchAltN() { 
 
    var event = new KeyboardEvent('keydown', { 
 
    key: 'n', 
 
    altKey: true 
 
    }); 
 
    document.dispatchEvent(event); 
 
} 
 

 
document.addEventListener('keydown', function (e) { 
 
    if (e.altKey || e.ctrlKey) { 
 
    // alt or ctrl is pressed 
 
    console.log('Key: ' + e.key + '; alt pressed: ' + e.altKey + '; ctrl pressed: ' + e.ctrlKey); 
 
    } 
 
});

<button onclick="dispatchAltN();">alt+n</button>

ただし、インラインではJavaScriptを使用しないでください。

幸運なことに、ブラウザはページの内容の読み込みが完了するとイベントを発生させます。このイベントはDOMContentLoadedと呼ばれます。

ブラウザが最初にイベントを発生するのを待つときに、DOMのすべての要素にアクセスできることを確認できます。

出典

2017-07-01 09:37:55 PeterMader

エラーを取得する "Uncaught TypeError：これを使用してnullの" addEventListener 'プロパティを読み取ることができません。 – Hasen

これは、JavaScriptが実行されたときにDOM要素がまだロードされていないためです。あなたは 'DOMContentLoaded'イベントをリスンする必要があります。私はこのイベントを使用するために私の答えを編集します。 – PeterMader

いいえ、IEの 'KeyboardEvent'はサポートされていません。 https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/KeyboardEvent#Browser_compatibility –

HTML

<button onClick="myFunction()">Click me</button>

はJavaScript

function myFunction(){ 
var k = new Event("keydown"); 
k.key="a"; //Change this value for different keys 
document.dispatchEvent(k); 
}

出典

2017-07-01 06:32:42 Coopza

キーAを押すだけですか？私の質問のように2つのキーを一緒に押す方法は？例えばCTRL + ESCAPE？ – Hasen

あなたはそれによるいかなるeventがevent.code

<!doctype html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script> 
 
    var ev = new Event('keydown'); 
 
    ev.code = 110; // change this code to specific event code to trigger it 
 

 
    function Load() { 
 

 
     var button = document.getElementById('btn'); 
 
     // Listen for the event. 
 
     button.addEventListener('keydown', function(e) { 
 
     if (e.code === 110) { 
 
      alert('Successfully triggered ALT + N'); 
 
     } 
 
     // write your logic here 
 
     }, false); 
 
    } 
 

 
    function dispatchKeypress(e) { 
 

 
     e.preventDefault(); 
 

 
     // Dispatch the event. 
 
     e.target.dispatchEvent(ev); 
 

 
    } 
 
    </script> 
 
</head> 
 

 
<body onload="Load()"> 
 
    <button onclick="dispatchKeypress(event)" id="btn">Button</button> 
 
</body> 
 

 
</html>

0123で codeだトリガすることができます

出典

2017-07-01 08:22:33

ありがとうございます。しかし、それは本当にALT + Nか単に "N"を押しますか？ 110はちょうど「N」のようです。 ESCAPEとALTをどうやって押しますか？ – Hasen

Javascript Jqueryを使わずにマウスをクリックしたときのキー入力

答えて

関連する問題