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

โธมัส สไตเนอร์

การสนับสนุนเบราว์เซอร์

  • 94
  • 94
  • x
  • x

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

  • keyboard-inset-top
  • keyboard-inset-right
  • keyboard-inset-bottom
  • keyboard-inset-left
  • keyboard-inset-width
  • keyboard-inset-height

ส่วนประกอบของแป้นพิมพ์เสมือนคือตัวแปรสภาพแวดล้อม 6 ตัวที่กำหนดสี่เหลี่ยมผืนผ้าด้วยส่วนบนสุด ขวา ล่าง และซ้ายจากขอบของวิวพอร์ต การใส่ข้อมูลความกว้างและความสูงจะคำนวณจาก Inset อื่นๆ เพื่อให้นักพัฒนาซอฟต์แวร์ทำงานตามหลักสรีรศาสตร์ของนักพัฒนาซอฟต์แวร์ ค่าเริ่มต้นของชุดแป้นพิมพ์แต่ละรายการคือ 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 เช่นเดียวกัน รูปภาพหลักของ @freestocks ใน Unsplash