Enterキーだけが押されたときにイベントを発火させる方法

Question

Shift+Enterなどではイベントは発火せずに、Enterのみが押されたときにのみイベントが発生するようにしたいと思っています。

現状以下のようなものを作ってみたのですが、Shift+Enterを押しても「console.log('2')」が実行されてしまい、もちろんEnterのみを押しても「console.log('2')」が実行されてしまう状況です。
また、これはShift+Enterのみを避けようとしたものですが、できれば◯◯+Enter全てを避けてEnterのみのときにイベントが発火するようにしたいです。

わかる方、教えてください。

<div id='body-text' class='body-text' contenteditable=true data-placeholder='Body Contents'></div>

var bodyContets = document.getElementById('body-text')
    bodyContets.addEventListener('keypress', onKeyPress)

    function onKeyPress(e) {
        if(e.keyCode == '16') {//e.shiftKeyでもダメでした
            if (e.keyCode == '13') {
                console.log('1')
            }
            else {
            }
        }
        else if(e.keyCode == '13') {
            console.log('2')
        }
}

Comments

[kunai]

うまく行かないというのはどういう状況でしょうか。Enter単体で押された時にも動作しない？Shift+Enterで押された時にも発動する？など

[退会済みユーザー]

詳細のご説明ができていなく申し訳ありません。
今質問内容をより詳細に変更いたしました。
ここでも簡単にお伝えするとShift+Enterを押してもEnterのみを押してもEnterのみのときに実行されるべき内容が実行されてしまいます。

Answer 1

Enterキー以外と、
Enterキー＋（Shift/Ctrl/Altキー）を防ぐのであれば、以下のコードで可能かと思われます。

function onKeyPress(e) {
  if ( e.keyCode !== 13 || ( e.keyCode === 13 && (e.shiftKey === true || e.ctrlKey === true || e.altKey === true) )) { // Enterキー除外
    return false;
  }
  // ここに処理をかく
}

= 追記しました =

Enterキー+Shiftキーで処理を通ってしまったのは、
その時の e.keyCodeは 13（Enterキーのコード）だったから です。

keypress(keydownも同様)は、いずれかのキーを押したときに
**「Shift,Ctrl,Altキーがそれぞれ押されているか」**という値を戻り値（e）に持っているため、
**「e.keyCodeが13でも、shift/ctrl/altが同時に押されていない」**という条件を下記のように追加しました。

( e.keyCode === 13 && (e.shiftKey === true || e.ctrlKey === true || e.altKey === true) )

説明が苦手なので、伝わるかわかりませんが・・・
このような感じです。
console.log で e を見てみながら、イベントを起こしてみると分かりやすいかもです。

Comments

[退会済みユーザー]

ありがとうございます！！
やりたかったことができました。

ちなみになんですが、私が質問の中であげたコードはどの部分がいけなかったのかぱっとわかったりしますか？
もしすぐにわかれば、勉強のために教えていただけると嬉しいのですが。

[CyberMergina]

追記してみました。解決したようで幸いです。

Answer 2

同時に入力されるキーは keydown してから keyup した瞬間に確定するのでキー一覧を保持しておけば実現できます。
汎用的に書ける関数を書いてみました。

• addholdkeyeventlistener.js: 同時に入力されたキー一覧を取得するイベントリスナ(addEventListener 互換)

<script src="addholdkeyeventlistener.js"></script>
<script>
addHoldKeyEventListener(document, function (event) {
  var keyCodes = event.keyCodes;

  if (keyCodes.length === 1 & keyCodes[0] === 13) {
    console.log(keyCodes[0]);
  }
}, false);

addHoldKeyEventListener(document, {i: 0, handleEvent: function (event) {
  var keyCodes = event.keyCodes;

  if (keyCodes.length === 1 & keyCodes[0] === 13) {
    console.log(++this.i, keyCodes[0]);
  }
}}, false);
</script>

Re: Hiro14 さん

Comments

[think49]

同時に入力されるキーは `keydown` してから `keyup` した瞬間に確定するのでキー一覧を保持しておけば実現できます。
汎用的に書ける関数を書いてみました。

- [addholdkeyeventlistener.js: 同時に入力されたキー一覧を取得するイベントリスナ(addEventListener 互換)](https://gist.github.com/think49/e53091b12791eabad03625fd08b52680)

```HTML
<script src="addholdkeyeventlistener.js"></script>
<script>
addHoldKeyEventListener(document, function (event) {
var keyCodes = event.keyCodes;

if (keyCodes.length === 1 & keyCodes[0] === 13) {
console.log(keyCodes[0]);
}
}, false);

addHoldKeyEventListener(document, {i: 0, handleEvent: function (event) {
var keyCodes = event.keyCodes;

if (keyCodes.length === 1 & keyCodes[0] === 13) {
console.log(++this.i, keyCodes[0]);
}
}}, false);
</script>
```

Re: Hiro14 さん

Answer 3

keydown と keyup を使うんだったらこんなのでも行ける気がします。

var mytest = {};

mytest.keys = [];
mytest.shift = 16;
mytest.enter = 13;

mytest.onkeydown = function(e){
  if(e.keyCode == mytest.shift){
    mytest.keys[mytest.shift] = e.keyCode;
  }
  if(e.keyCode == mytest.enter) {
    if(mytest.keys[mytest.shift]) {
      console.log('shift + enter');
    } else {
      console.log('enter only');
    }
  }
};

mytest.onkeyup = function(e){ mytest.keys = []; };

var bodyContets = document.getElementById('body-text');
    bodyContets.addEventListener('keydown', mytest.onkeydown);
    bodyContets.addEventListener('keyup', mytest.onkeyup);

Comments

[退会済みユーザー]

ご丁寧にコードを書いて教えていただきありがとうございました。
こちらでもしっかり実装できました。