Detect modifier keycode trong Javascript [JAVASCRIPT]


Hôm nay ta sẽ học cách phát hiện khi nào cách phím được nhấn dùng javascript.

<input type="text" id="input" />

<div id='result'></div>

<script>

  var input = document.getElementById('input');
  input.addEventListener('keyup', runEvent);

  function runEvent(e){
    document.getElementById('result').innerHTML += `${e.keyCode} `; 

    if (e.key == 'a' || e.key == 'A') {
	alert('you pressed a or A');
    }
    if (e.key == "Control") {
  	alert('Ctrl key');
    }

    if (e.key == "Meta") {
       alert("Win key");
    }

    if (e.key == "Alt") {
      alert("Alt key");
    }

    if (e.key == "Shift") {
      alert("Shift key");
    }

  }
</script>

Ta dùng e.keyCode để in ra mã unicode của ký tự. e.key in ra các key ta nhập vào input. khi Ta nhấn các phím như Alt,Ctrl,Win key, Shift thì sẽ in ra Alt, Control, Meta, Shift. Vì vậy ta có thể detect khi nhấn phím ctrl sẽ làm gì, khi nhấn Shift thì sẽ làm gì tuỳ ý chúng ta.

Ngoài ra ta cũng có thể dùng e.altKey, e.ctrlKey, e.metaKey , e.shiftKey để detect các phím Alt, Ctrl, Win or Command Key, Shift.

if (e.ctrlKey) {
 alert('Ctrl key');
}

Để detect CapsLock có mở không ta có thể dùng e.getModifierState("CapsLock") Khi ta nhấn CapsLock và gõ phím thì sẽ hiện thông báo "CapsLock is on".

<input type="text" id="input3" />
<div id='result3'></div>

<script>

  var input3 = document.getElementById('input3');
  input3.addEventListener('keyup', runEvent);

  function runEvent(e){
    if (e.getModifierState('CapsLock')){
       document.getElementById('result3').innerHTML = "CapsLock is on"; 
    }else {
       document.getElementById('result3').innerHTML = "CapsLock is off"; 
    }
  }
</script>

còn nếu muốn detect chuột trái, giữa, phải ta dùng e.which.

<div id='div1'>
<p>1: left</p>
<p>2: middle</p>
<p>3: right</p>
</div>
<div id='result2'></div>

<script>

  var div1 = document.getElementById('div1');
  div1.addEventListener('mousedown', runEvent);

  function runEvent(e){
    document.getElementById('result2').innerHTML += `${e.which} `; 
  }
</script>

1: left

2: middle

3: right

Như vậy ta đã biết các detect phím, chuột trong javascript rồi đấy.