| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Document</title> |
|
|
| <style> |
| [hide]{ |
| position: absolute; |
| visibility: hidden; |
| opacity: 0; |
| } |
| |
| #virtual-keyboard-layout{ |
| position: absolute; |
| width: 100%; |
| height: 100%; |
| left: 0; |
| top: 0; |
| } |
| |
| #virtual-keyboard-layout::before{ |
| position: absolute; |
| width: env(keyboard-inset-width, 0px); |
| height: env(keyboard-inset-height, 0px); |
| inset: calc(100% - env(keyboard-inset-top, 0px)) |
| calc(100% - env(keyboard-inset-right, 0px)) |
| calc(100% - env(keyboard-inset-bottom, 0px)) |
| calc(100% - env(keyboard-inset-left)); |
| background-color: red; |
| } |
| |
| </style> |
|
|
| </head> |
| <body> |
| <div id="virtual-keyboard-layout" hide></div> |
|
|
| <button onclick="navigator?.virtualKeyboard?.show();">Show virtual keyboard</button> |
|
|
| <script> |
| |
| navigator?.virtualKeyboard?.overlaysContent = true; |
| navigator?.virtualKeyboard?.ongeometrychange = () => console.log(navigator?.virtualKeyboard?.boundingRect || null); |
| |
| </script> |
|
|
| </body> |
| </html> |
