อุปกรณ์อย่างแท็บเล็ตหรือโทรศัพท์มือถือมักจะมีแป้นพิมพ์เสมือนสำหรับพิมพ์ข้อความ
แป้นพิมพ์เสมือนจะปรากฏและหายไปโดยขึ้นอยู่กับการกระทำของผู้ใช้ ซึ่งแป้นพิมพ์สามารถปรับแบบไดนามิกได้ เช่น อิงตามแอตทริบิวต์ inputmode
ความยืดหยุ่นนี้มาพร้อมกับข้อเสียที่ว่าเครื่องมือจัดวางของเบราว์เซอร์จะต้องได้รับแจ้งถึงการมีอยู่ของแป้นพิมพ์เสมือนและอาจต้องปรับเลย์เอาต์ของเอกสารเพื่อชดเชย เช่น ช่องป้อนข้อมูลที่ผู้ใช้กำลังจะพิมพ์อาจถูกบดบังด้วยแป้นพิมพ์เสมือน เบราว์เซอร์จึงต้องเลื่อนหน้าจอดังกล่าวมาดู
เดิมทีเบราว์เซอร์ต้องจัดการกับความท้าทายนี้ด้วยตนเอง แต่แอปพลิเคชันที่ซับซ้อนมากขึ้นอาจต้องควบคุมลักษณะการทำงานของเบราว์เซอร์มากกว่า ตัวอย่างเช่น อุปกรณ์เคลื่อนที่แบบหลายหน้าจอ ซึ่งวิธีการแบบเดิมจะทำให้เกิดพื้นที่บนหน้าจอที่ "สูญเปล่า" หากแป้นพิมพ์เสมือนแสดงบนหน้าจอเพียงส่วนเดียว แต่วิวพอร์ตที่ใช้ได้หดลงบนหน้าจอทั้ง 2 หน้าจอ รูปภาพด้านล่างแสดงวิธีใช้ VirtualKeyboard API เพื่อเพิ่มประสิทธิภาพเลย์เอาต์ของเอกสารแบบไดนามิกเพื่อชดเชยการแสดงแป้นพิมพ์เสมือน
สถานการณ์เช่นนี้ VirtualKeyboard API จึงเข้ามามีบทบาท ซึ่งประกอบด้วย 3 ส่วนดังนี้
- อินเทอร์เฟซ
VirtualKeyboard
ในออบเจ็กต์navigator
สำหรับการเข้าถึงแป้นพิมพ์เสมือนจาก JavaScript แบบเป็นโปรแกรม - ชุดตัวแปรสภาพแวดล้อม CSS ที่ให้ข้อมูลเกี่ยวกับรูปลักษณ์ของแป้นพิมพ์เสมือน
- นโยบายแป้นพิมพ์เสมือนที่กำหนดว่าควรแสดงแป้นพิมพ์เสมือนหรือไม่
สถานะปัจจุบัน
VirtualKeyboard API พร้อมใช้งานใน Chromium 94 บนเดสก์ท็อปและอุปกรณ์เคลื่อนที่
การตรวจหาฟีเจอร์และการรองรับเบราว์เซอร์
หากต้องการตรวจหาว่าเบราว์เซอร์ปัจจุบันรองรับ VirtualKeyboard API หรือไม่ ให้ใช้ข้อมูลโค้ดต่อไปนี้
if ('virtualKeyboard' in navigator) {
// The VirtualKeyboard API is supported!
}
การใช้ VirtualKeyboard API
VirtualKeyboard API จะเพิ่มอินเทอร์เฟซ VirtualKeyboard
ใหม่ลงในออบเจ็กต์ navigator
การเลือกใช้ลักษณะการทำงานใหม่ของแป้นพิมพ์เสมือน
หากต้องการบอกให้เบราว์เซอร์ทราบว่าคุณจัดการการบดบังของแป้นพิมพ์เสมือนด้วยตนเอง คุณต้องเลือกใช้ลักษณะการทำงานใหม่ของแป้นพิมพ์เสมือนก่อนโดยการตั้งค่าพร็อพเพอร์ตี้บูลีน overlaysContent
เป็น true
navigator.virtualKeyboard.overlaysContent = true;
การแสดงและการซ่อนแป้นพิมพ์เสมือน
คุณสามารถแสดงแป้นพิมพ์เสมือนแบบเป็นโปรแกรมได้โดยเรียกใช้เมธอด show()
องค์ประกอบที่โฟกัสต้องเป็นตัวควบคุมแบบฟอร์ม (เช่น องค์ประกอบ textarea
) หรือโฮสต์การแก้ไข (เช่น โดยใช้แอตทริบิวต์ contenteditable
) เพื่อให้การดำเนินการนี้ทำงานได้ เมธอดนี้จะแสดง undefined
เสมอ แต่จะทริกเกอร์เหตุการณ์ geometrychange
หากแป้นพิมพ์เสมือนก่อนหน้านี้ไม่แสดง
navigator.virtualKeyboard.show();
หากต้องการซ่อนแป้นพิมพ์เสมือน ให้เรียกใช้เมธอด hide()
เมธอดจะแสดงผลเป็น undefined
เสมอ แต่ทริกเกอร์เหตุการณ์ geometrychange
หากก่อนหน้านี้มีการแสดงแป้นพิมพ์เสมือน
navigator.virtualKeyboard.hide();
การรับเรขาคณิตปัจจุบัน
คุณดูเรขาคณิตปัจจุบันของแป้นพิมพ์เสมือนได้โดยดูที่พร็อพเพอร์ตี้ boundingRect
ซึ่งจะแสดงขนาดปัจจุบันของแป้นพิมพ์เสมือนเป็นออบเจ็กต์ DOMRect
ส่วนการฝังจะสอดคล้องกับคุณสมบัติด้านบน ขวา ล่าง และ/หรือซ้าย
const { x, y, width, height } = navigator.virtualKeyboard.boundingRect;
console.log('Virtual keyboard geometry:', x, y, width, height);
การได้รับข้อมูลการเปลี่ยนแปลงทางเรขาคณิต
ระบบจะส่งเหตุการณ์ geometrychange
ทุกครั้งที่แป้นพิมพ์เสมือนปรากฏขึ้นหรือหายไป พร็อพเพอร์ตี้ target
ของกิจกรรมมีออบเจ็กต์ virtualKeyboard
ซึ่งมีเรขาคณิตใหม่ของแป้นพิมพ์เสมือนที่ประกอบเป็น DOMRect
navigator.virtualKeyboard.addEventListener('geometrychange', (event) => {
const { x, y, width, height } = event.target.boundingRect;
console.log('Virtual keyboard geometry changed:', x, y, width, height);
});
ตัวแปรสภาพแวดล้อม CSS
VirtualKeyboard API จะแสดงชุดตัวแปรสภาพแวดล้อม CSS ที่ให้ข้อมูลเกี่ยวกับลักษณะที่ปรากฏของแป้นพิมพ์เสมือน
โดยมีลักษณะคล้ายกับพร็อพเพอร์ตี้ inset
ของ CSS ซึ่งสอดคล้องกับพร็อพเพอร์ตี้บน ขวา ล่าง และ/หรือซ้าย
keyboard-inset-top
keyboard-inset-right
keyboard-inset-bottom
keyboard-inset-left
keyboard-inset-width
keyboard-inset-height
ระยะขอบของแป้นพิมพ์เสมือนคือตัวแปรสภาพแวดล้อม 6 รายการที่กําหนดสี่เหลี่ยมผืนผ้าตามระยะขอบด้านบน ขวา ล่าง และซ้ายจากขอบของวิวพอร์ต ส่วนความกว้างและความสูงจะคำนวณ
จากด้านอื่นๆ สำหรับหลักการยศาสตร์ของนักพัฒนาซอฟต์แวร์ ค่าเริ่มต้นของค่าที่แทรกของแป้นพิมพ์แต่ละรายการคือ
0px
หากไม่ได้ระบุค่าสำรอง
โดยทั่วไป คุณจะใช้ตัวแปรสภาพแวดล้อมดังตัวอย่างด้านล่าง
.some-class {
/**
* Use a margin that corresponds to the virtual keyboard's height
* if the virtual keyboard is shown, else use the fallback value of `50px`.
*/
margin-block-end: env(keyboard-inset-height, 50px);
}
.some-other-class {
/**
* Use a margin that corresponds to the virtual keyboard's height
* if the virtual keyboard is shown, else use the default fallback value of `0px`.
*/
margin-block-end: env(keyboard-inset-height);
}
นโยบายแป้นพิมพ์เสมือน
บางครั้งแป้นพิมพ์เสมือนไม่ควรปรากฏขึ้นเมื่อมีการโฟกัสองค์ประกอบที่แก้ไขได้ ตัวอย่างเช่น แอปพลิเคชันสเปรดชีตที่ผู้ใช้แตะเซลล์เพื่อให้ค่าของเซลล์รวมอยู่ในสูตรของเซลล์อื่นได้ virtualkeyboardpolicy
เป็นแอตทริบิวต์ที่มีคีย์เวิร์ดเป็นสตริง auto
และ manual
เมื่อระบุในองค์ประกอบที่เป็นโฮสต์ contenteditable
auto
จะทําให้องค์ประกอบที่แก้ไขได้ที่เกี่ยวข้องแสดงแป้นพิมพ์เสมือนโดยอัตโนมัติเมื่อโฟกัสหรือแตะ และ manual
จะแยกโฟกัสและการแตะองค์ประกอบที่แก้ไขได้ออกจากการเปลี่ยนแปลงในสถานะปัจจุบันของแป้นพิมพ์เสมือน
<!-- Do nothing on regular focus, but show the virtual keyboard on double-click. -->
<div
contenteditable
virtualkeyboardpolicy="manual"
inputmode="text"
ondblclick="navigator.virtualKeyboard.show();"
>
Double-click to edit.
</div>
สาธิต
คุณดูการใช้งานจริงของ VirtualKeyboard API ได้ในการสาธิตบน Glitch อย่าลืมดูซอร์สโค้ดเพื่อดูวิธีติดตั้งใช้งาน
แม้ว่าสังเกตเหตุการณ์ geometrychange
ในการฝัง iframe ได้ แต่ลักษณะการทำงานของแป้นพิมพ์เสมือนจริงต้องเปิดการสาธิตในแท็บเบราว์เซอร์ของตัวเอง
ลิงก์ที่มีประโยชน์
- ข้อกำหนด
- ที่เก็บ
- รายการ ChromeStatus
- ข้อบกพร่องของ Chromium
- การตรวจสอบ TAG ของ W3C
- คำขอตำแหน่งมาตรฐาน Mozilla
- คำขอตำแหน่งมาตรฐาน WebKit
กิตติกรรมประกาศ
VirtualKeyboard API ระบุโดย Anupam Snigdha จาก Microsoft โดยได้รับความช่วยเหลือจาก Grisha Lyukshin อดีตบรรณาธิการจาก Microsoft