การจัดการ Event ของ Keyboard และ Mouse ใน VueJS เพิ่มเติม

บทความใหม่ เดือนที่แล้ว โดย Ninenik Narkdee
vuejs event handling keyboard event mouse event

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ vuejs event handling keyboard event mouse event

ดูแล้ว 232 ครั้ง


เนื้อหาตอนต่อไปนี้ เราจะมาต่อกันด้วย event ของเมาส์และคีร์บอร์ด
เพิ่มเติม ต่อจากตอนที่แล้วที่พูดถึงการใช้งาน event ต่างๆ รวมถึงการใช้ 
event modifier หรือการปรับแต่ง event มาบ้างแล้ว
 

การใช้งาน Keyboard Events

ใน Vue.js การจัดการกับ keyboard events (เหตุการณ์ที่เกี่ยวข้องกับแป้นพิมพ์) 
สามารถทำได้ง่ายโดยใช้วิธีการผูก event บนองค์ประกอบ HTML ที่ต้องการจัดการ เช่น 
<input>, <textarea> หรือองค์ประกอบอื่นๆ ที่รองรับการรับ input จากผู้ใช้ 
เราสามารถจัดการโดยใช้รูปแบบ v-bind หรือ @
 

Keyboard Events พื้นฐาน

Vue.js รองรับ keyboard events พื้นฐานที่สามารถใช้งานได้โดยตรงเช่นเดียวกับ 
JavaScript ธรรมดา ได้แก่:
 
@keyup - เกิดขึ้นเมื่อปล่อยนิ้วออกจากแป้นพิมพ์
@keydown - เกิดขึ้นเมื่อกดแป้นพิมพ์ลง
@keypress - เกิดขึ้นเมื่อกดแป้นพิมพ์ลง (อาจถูกเลิกใช้ในบางเบราว์เซอร์)
 

ตัวอย่างการใช้งาน:

<script setup>
import { ref } from 'vue'

function onKeyUp(event) {
  console.log('Key Up Event:', event)
}
function onKeyDown(event) {
  console.log('Key Down Event:', event)
}
function onKeyPress(event) {
  console.log('Key Press Event:', event)
}
</script>
<template>
  <input @keyup="onKeyUp" @keydown="onKeyDown" @keypress="onKeyPress">
</template>
 
ใน input text ตัวอย่าง ถ้าเรากดแป้นใดๆ ลงไป จะเกิดลำดับ event คือ Key Down 
Key Press และ Key Up ตามลำดับ บางปุ่มจะมีแค่ Key Down และ Key Up
 
 

การใช้ Key Modifiers

Vue.js มี key modifiers ที่ช่วยให้การจัดการกับ keyboard events ง่ายขึ้นโดยไม่ต้อง
เขียน logic เพิ่มเติม ตัวอย่างเช่น:
 
.enter - เมื่อกดปุ่ม Enter
.tab - เมื่อกดปุ่ม Tab
.delete (หรือ .del) - เมื่อกดปุ่ม Delete (รวมทั้ง Backspace)
.esc - เมื่อกดปุ่ม Escape
.space - เมื่อกดปุ่ม Space
.up, .down, .left, .right - เมื่อกดปุ่มลูกศร
 
โดยรูปแบบการใช้งานก็จะเป็นในลักษณะ KeyboardEvent.key  ตัวอย่างเช่น
 
<!-- ถ้ากดปุ่ม Enter จะทำการส่งข้อมูล -->
<input @keyup.enter="submit" />
 
เราสามารถระบุปุ่มต่างในแป้นพิมพ์โดยใช้รูปแบบ kebab-case ซึ่งทุกคำจะถูกเขียนด้วยอักษร
ตัวเล็กทั้งหมด และใช้เครื่องหมายยัติภังค์ (-) หรือขีดกลาง เป็นตัวเชื่อมระหว่างคำแทนการเว้นวรรค
สมมติใช้เป็นปุ่ม Page Up , Page Down , หรือ Num lock ก็จะเป็น @keyup.page-up
, @keyup.page-down , @keyup.page-down หรือ @keyup.num-lock ตามลำดับ
 
 

System Modifier Keys

นอกจาก key modifiers, Vue.js ยังรองรับ system modifier keys ที่ช่วยให้เราสามารถ
จัดการกับเหตุการณ์ที่เกิดจากการกดปุ่มพิเศษร่วมกับ key อื่นๆ เช่น:
 
.ctrl - กดปุ่ม Control
.alt - กดปุ่ม Alt
.shift - กดปุ่ม Shift
.meta - กดปุ่ม Meta (Command บน Mac, Windows key บน Windows)
 

ตัวอย่างการใช้งาน:

<script setup>
import { ref } from 'vue'

function onCtrlEnter(event) {
  console.log('Ctrl + Enter Key Pressed')
}
</script>
<template>
  <input @keyup.ctrl.enter="onCtrlEnter">
</template>
 
เมื่อเรากดปุ่ม ctrl ค้างแล้วกดปุ่ม Enter ก็จะเรียกการทำงานฟังก์ชั่น onCtrlEnter
นอกจากนี้เรายังสามารถใช้งานร่วมกับ Event Modifiers ที่ได้อธิบายไปแล้วในบทความ
ตอนที่ผ่านมาได้ 
 
<script setup>
import { ref } from 'vue'

function onEnter(event) {
  console.log('Enter Key Pressed with Event Modifiers')
}
</script>
<template>
  <input @keyup.enter.stop.prevent="onEnter">
</template>
 
ตัวอย่างการใช้ปุ่มพิเศษเพิ่มเติม
 
<!-- Alt + Enter -->
<input @keyup.alt.enter="clear" />

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
 
 

การใช้งาน .exact Modifier

ใน Vue.js, .exact modifier เป็นเครื่องมือที่ใช้เพื่อระบุว่า event handler ควรถูก
เรียกใช้ก็ต่อเมื่อเฉพาะ key modifiers ที่ระบุเท่านั้นถูกกด เช่นเดียวกับตัวมันเอง โดยไม่มี
ปุ่มอื่นที่ถูกกดพร้อมกัน
 
ตัวอย่างเช่น, พิจารณากรณีที่เราต้องการให้ event handler ถูกเรียกใช้เฉพาะเมื่อมีการ
กดปุ่ม Control (Ctrl) เท่านั้น โดยไม่มีปุ่มอื่นๆ ถูกกดพร้อมกัน หากไม่ใช้ .exact modifier, 
event handler จะถูกเรียกใช้เมื่อมีการกดปุ่ม Ctrl พร้อมกับปุ่มอื่นๆ (เช่น Ctrl+Shift หรือ 
Ctrl+Alt)
 
<script setup>
import { ref } from 'vue'

function onCtrlClick(event) {
  console.log('Control key was clicked exactly.')
}
</script>
<template>
  <button @click.ctrl.exact="onCtrlClick">Click me</button>
</template>
 
ปุ่มนี้เมื่อกดจะเรียกใช้คำสั่ง onCtrlClick ก็ต่อเมื่อ กดปุ่ม ctrl ไปด้วยพร้อมกับคลิก แต่ถ้า มีการ
กดปุ่ม ctrl + shift หรือ พร้อมปุ่มอื่นๆ อีก ก็จะไม่เข้าเงื่อนไขการใช้งาน  .exact Modifier
 

 

การใช้งาน Mouse Button Modifiers ใน vuejs

ใน Vue.js, Mouse Button Modifiers เป็นเครื่องมือที่ช่วยให้เราจัดการกับเหตุการณ์
การคลิกของเมาส์ได้ง่ายขึ้น โดยระบุว่า event handler ควรถูกเรียกใช้เมื่อคลิกด้วยปุ่มเมาส์
ที่เฉพาะเจาะจงเท่านั้น ซึ่งประกอบไปด้วย:
 
.left - เมื่อคลิกด้วยปุ่มซ้ายของเมาส์
.right - เมื่อคลิกด้วยปุ่มขวาของเมาส์
.middle - เมื่อคลิกด้วยปุ่มกลางของเมาส์ (ปุ่มล้อเลื่อน)
 
 

1. .left Modifier

ใช้สำหรับตรวจสอบการคลิกด้วยปุ่มซ้ายของเมาส์
 
<script setup>
import { ref } from 'vue'

function onLeftClick(event) {
  console.log('Left button clicked')
}
</script>
<template>
  <button @click.left="onLeftClick">Click me with left button</button>
</template>
 
คำสั่ง onLeftClick จะถูกเรียกให้ทำงานก็ต่อเมื่อเราคลิกที่ปุ่มเมาส์ด้วยปุ่มซ้ายเท่านั้น 
 
 

2. .right Modifier

ใช้สำหรับตรวจสอบการคลิกด้วยปุ่มขวาของเมาส์
 
<script setup>
import { ref } from 'vue'

function onRightClick(event) {
  console.log('Right button clicked')
}
</script>
<template>
  <button @click.right="onRightClick">Click me with right button</button>
  <!-- ถ้าไม่ต้องการให้เมนูขึ้น คลิกขวา ก็สามารถเติม .prevent เข้าไปดังนี้ได้  -->
  <button @click.right.prevent="onRightClick">Click me with right button</button>  
</template>
 
คำสั่ง onRightClick จะถูกเรียกให้ทำงานก็ต่อเมื่อเราคลิกที่ปุ่มเมาส์ด้วยปุ่มขวาเท่านั้น ซึ่งปุ่ม
แรกเมื่อเราคลิกด้วยปุ่มขวา ก็จะทำคำสั่ง onRightClick พร้อมทั้งแสดงเมนู ปกติของบราเซอร์
เมื่อเราคลิกขวา ในขณะที่ปุ่มที่สอง เราเติม .prevent เพิ่มเข้าไป เมื่อเราคลิกด้วยปุ่มขวา ก็จะทำ
คำสั่ง onRightClick เท่านั้น โดยที่เมนูของบราเซอร์ไม่แสดง
 
 

3. .middle Modifier

ใช้สำหรับตรวจสอบการคลิกด้วยปุ่มกลางของเมาส์ (ปุ่มล้อเลื่อน)
 
<script setup>
import { ref } from 'vue'

function onMiddleClick(event) {
  console.log('Middle button clicked')
}
</script>
<template>
  <button @click.middle="onMiddleClick">
    Click me with middle button
  </button>
</template>
 
เราคลิกซ้าย หรือคลิกขวาที่ปุ่ม ก็จะไม่ทำคำสั่ง onMiddleClick จนกว่าเราจะคลิกที่ปุ่ม
ตรงกลางเท่านั้นจึงจะเรียกคำสั่ง onMiddleClick มาทำงาน
 
จะเห็นว่าจากสองตอนของบทความเกี่ยวกับการใช้งาน Event Handling หรือการจัดการ Event
ใน vuejs จะค่อนข้างจะสะดวกในการปรับใช้งานพอสมควร ทำให้เวลาใช้ ไม่ต้องเขียนโค้ดเพิ่มมาก
มายให้ยุ่งยาก เพียงแค่กำหนดรูปแบบที่ต้องการก็ทำตามเงื่อนไขได้แล้ว 
 
สำหรับบทความตอนหน้าจะเป็นอะไร รอติดตาม






กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ



อ่านต่อที่บทความ



ทบทวนบทความที่แล้ว









เนื้อหาที่เกี่ยวข้อง






เนื้อหาพิเศษ เฉพาะสำหรับสมาชิก

กรุณาล็อกอิน เพื่ออ่านเนื้อหาบทความ

ยังไม่เป็นสมาชิก

สมาชิกล็อกอิน



( หรือ เข้าใช้งานผ่าน Social Login )




URL สำหรับอ้างอิง





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ