การสนับสนุนเบราว์เซอร์
- 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 แต่ลักษณะการทำงานของแป้นพิมพ์เสมือนจริงจะต้องเปิดเดโมในแท็บเบราว์เซอร์ของตัวเอง
ลิงก์ที่มีประโยชน์
- ข้อกำหนด
- ที่เก็บ
- รายการ ChromeStatus
- ข้อบกพร่องของ Chromium
- การตรวจสอบแท็ก W3C
- คำขอตำแหน่งมาตรฐานของ Mozilla
- คำขอตำแหน่งมาตรฐานของ WebKit
กิตติกรรมประกาศ
VirtualKeyboard API ระบุโดย Anupam Snigdha จาก Microsoft โดยได้รับการสนับสนุนจากบรรณาธิการเก่า Grisha Lyukshin จาก Microsoft เช่นเดียวกัน รูปภาพหลักของ @freestocks ใน Unsplash