หน้านี้ได้รับการแปลโดย Cloud Translation API

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

Thomas Steiner

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

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