Keyboard events trong Javascript [JAVASCRIPT]


Ngoài click event ta còn có một số event như:
  1. submit
  2. dbclick
  3. keyup
  4. keydown
  5. keypress
  6. focus
  7. blur
  8. paste
  9. input
  10. change

Và nhiều event khác.


Submit event

Ví dụ ta có 1 form.

<form  id="form" action="login.html">
  <input type="text" id= "textInput" />
  <button id="btn" type="submit">Submit</button>
</form>

<div id="output"></div>

Khi nhấn vào submit thì sẽ lấy giá trị của input hiển thị ra div

<script>
  var form = document.getElementById('form');
  var output = document.getElementById('output');

  form.addEventListener('submit', runCode);

  function runCode(e){
     e.preventDefault();
     console.log(e.type); // submit
     console.log(e.target);
     // 0: <input id="textInput" type="text">
     // 1: <button id="btn" type="submit">

     console.log(e.target[0].value); // hello

     output.innerHTML = e.target[0].value;
     e.target[0].value = "";
  }
</script>

e.preventDefault() dùng để ngăn không cho form chuyển trang sang login.html. Khi ta submit form thì ta có thể truy cập vào input và button dùng e.target.Như ta thấy bên trên input và button có thứ tự là 0 và 1. Ta có truy cập giá trị của input bằng e.target[0].value. Ta hiển thị giá trị này lên div

output.innerHTML = e.target[0].value;

Sau đó xoá value trên input

e.target[0].value = "";


keyup event

Nếu ta muốn khi ta gõ vào input tự động hiển thị lên div có id là output2. Ta làm như sau:

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

<script>

  var input= document.getElementById('input');
  var output2 = document.getElementById('output2');

  input.addEventListener('keyup', runCode);

  function runCode(e){
     
     console.log(e.type); // keyup
     output2.innerHTML = e.target.value;
  }
</script>

Ta dùng e.target.value để lấy giá trị của input.


change

Ví dụ ta có 1 select.

<select name="mySelect" id='country'>
  <option value="1">Viet Nam</option>.  .  
  <option value="2" selected="selected">Canada</option>
  <option value="3">US</option>
</select>
<div id="output3"></div>

Khi ta chọn giá trị khác thì sẽ hiển thị value ra div có id output3.

<script>

  var select = document.getElementById('country');
  var output3 = document.getElementById('output3');
  select.addEventListener('change', runCode);

  function runCode(e){
    console.log(e.type);// change.  
    output3.innerHTML = e.target.value;

  }
</script>


Các sự kiện khác cách dùng cũng tương tự như trên. Hôm nay ta đã biết dùng những keyboard event trong javacript rồi. Bài viết sau ta sẽ học về mouse event nhé. ^_^