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

Thomas Steiner

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

  • 94
  • 94
  • x
  • x

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

ความยืดหยุ่นนี้เป็นไปตามราคาที่เครื่องมือการจัดวางของเบราว์เซอร์จะต้องรับรู้ถึง การแสดงแป้นพิมพ์เสมือน และอาจต้องปรับเลย์เอาต์ของเอกสารเพื่อ ชดเชย ตัวอย่างเช่น ฟิลด์ป้อนข้อมูลที่ผู้ใช้กำลังจะพิมพ์อาจถูกปิดบังโดย แป้นพิมพ์เสมือน ดังนั้นเบราว์เซอร์จึงต้องเลื่อนแป้นพิมพ์เสมือนมาดู

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