ควบคุมเต็มรูปแบบด้วย VirtualKeyboard API

การรองรับเบราว์เซอร์

  • Chrome: 94
  • Edge: 94
  • Firefox: ไม่สนับสนุน
  • Safari: ไม่รองรับ

แหล่งที่มา

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

กิตติกรรมประกาศ

VirtualKeyboard API ระบุโดย Anupam Snigdha จาก Microsoft โดยได้รับความช่วยเหลือจาก Grisha Lyukshin อดีตบรรณาธิการจาก Microsoft