เนื้อหาตอนต่อไปนี้ เราจะมาต่อกันด้วย 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 จะค่อนข้างจะสะดวกในการปรับใช้งานพอสมควร ทำให้เวลาใช้ ไม่ต้องเขียนโค้ดเพิ่มมาก
มายให้ยุ่งยาก เพียงแค่กำหนดรูปแบบที่ต้องการก็ทำตามเงื่อนไขได้แล้ว
สำหรับบทความตอนหน้าจะเป็นอะไร รอติดตาม
อ่านต่อที่บทความ
เนื้อหาที่เกี่ยวข้อง