Pełna kontrola dzięki interfejsowi VirtualKeyboard API

Thomas Steiner

Urządzenia, takie jak tablety i komórki, zwykle mają wirtualną klawiaturę do wpisywania tekstu. W przeciwieństwie do klawiatury fizycznej, która jest zawsze dostępna i niezmieniona, wyświetla się klawiatura wirtualna i znika w zależności od działań użytkownika, do których może się dynamicznie dostosowywać, Na podstawie modelu inputmode .

Ta elastyczność wynika z tego, że mechanizm układu przeglądarki musi być informowany klawiatury wirtualnej i potencjalnie musi dostosować układ dokumentu, wynagradzać. Na przykład pole do wprowadzania danych, w którym użytkownik ma wpisywać, może być zasłonięte klawiatury wirtualnej, aby przeglądarka musi ją przewinąć.

Zazwyczaj przeglądarki radzą sobie z tym wyzwaniem sami, ale bardziej złożone aplikacje może wymagać większej kontroli nad zachowaniem przeglądarki. Przykłady: urządzenia mobilne korzystające z różnych urządzeń w którym tradycyjne podejście spowodowałoby „zmarnowanie” jeśli klawiatura wirtualna jest wyświetlany tylko na jednym segmencie ekranu, ale gdy dostępny obszar jest mniejszy na obu ekranach, mimo wszystko. Na grafice poniżej widać, jak można wykorzystać interfejs VirtualKlawiatura API do optymalizacji układu. dynamicznie kompensować obecność klawiatury wirtualnej.

W takich sytuacjach z pomocą przydaje się interfejs VirtualKlawiatura. Składa się z 3 części:

• Interfejs VirtualKeyboard w obiekcie navigator zapewniający programowy dostęp do wirtualnego z klawiatury JavaScript.
• Zestaw zmiennych środowiskowych CSS dostarczających informacje o Wygląd.
• Zasada klawiatury wirtualnej określająca, czy klawiatura wirtualna powinna być wyświetlana.

Obecny stan,

Interfejs VirtualKeyboard API jest dostępny w Chromium 94 na komputerach i urządzeniach mobilnych.

Wykrywanie funkcji i obsługa przeglądarki

Aby sprawdzić, czy interfejs VirtualKeyboard API jest obsługiwany w bieżącej przeglądarce, użyj tego fragmentu kodu:

if ('virtualKeyboard' in navigator) {
  // The VirtualKeyboard API is supported!
}

Korzystanie z interfejsu VirtualKlawiatura API

Interfejs VirtualKlawiatura API dodaje nowy interfejs VirtualKeyboard do obiektu navigator.

Wyrażanie zgody na nowy sposób działania klawiatury wirtualnej

Aby poinformować przeglądarkę, że samodzielnie radzisz sobie z zasłonięciem klawiatury wirtualnej, musisz: Najpierw włącz nowy sposób działania klawiatury wirtualnej, ustawiając wartość logiczną overlaysContent do: true.

navigator.virtualKeyboard.overlaysContent = true;

Pokazywanie i ukrywanie klawiatury wirtualnej

Możesz programowo wyświetlić klawiaturę wirtualną, wywołując jej metodę show(). Aby to działało, zaznaczony element musi być kontrolką formularza (np. elementem textarea) lub być hostem edycji. (na przykład przez użycie contenteditable. ). Metoda zawsze zwraca undefined, ale wyzwala zdarzenie geometrychange jeśli klawiatura wirtualna nie była wcześniej wyświetlana.

navigator.virtualKeyboard.show();

Aby ukryć klawiaturę wirtualną, wywołaj metodę hide(). Metoda zawsze zwraca wartość undefined, ale uruchamia zdarzenie geometrychange, jeśli została wyświetlona wcześniej klawiatura wirtualna.

navigator.virtualKeyboard.hide();

Pobieram bieżącą geometrię

Bieżącą geometrię klawiatury wirtualnej możesz sprawdzić we właściwości boundingRect. Widoczne są bieżące wymiary klawiatury wirtualnej jako DOMRect. Wcięcie odpowiada właściwościom: górna, prawa, dół i/lub lewa strona.

const { x, y, width, height } = navigator.virtualKeyboard.boundingRect;
console.log('Virtual keyboard geometry:', x, y, width, height);

Informowanie o zmianach geometrycznych

Gdy klawiatura wirtualna się pojawia lub znika, wysyłane jest zdarzenie geometrychange. właściwość target zawiera obiekt virtualKeyboard, który (jak omówiono powyżej) zawiera nową geometrię wstawki klawiatury wirtualnej jako DOMRect.

navigator.virtualKeyboard.addEventListener('geometrychange', (event) => {
  const { x, y, width, height } = event.target.boundingRect;
  console.log('Virtual keyboard geometry changed:', x, y, width, height);
});

Zmienne środowiskowe CSS

Interfejs VirtualKlawiatura API udostępnia zestaw zmiennych środowiskowych CSS, które udostępniają informacje wygląd klawiatury wirtualnej. Są modelowane podobnie do właściwości CSS inset, odpowiadającego właściwościom: góra, prawa, dół lub lewa strona.

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

Wstawki klawiatury wirtualnej to sześć zmiennych środowiskowych, które definiują prostokąt na dole i po lewej stronie od krawędzi widocznego obszaru. Obliczane są wstawki szerokości i wysokości dla ergonomii programistycznej. Domyślna wartość każdego wcięcia klawiatury to 0px, jeśli nie podano wartości zastępczej.

Zwykle należy używać zmiennych środowiskowych jak w tym przykładzie:

.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);
}

Zasady dotyczące klawiatury wirtualnej

Czasami klawiatura wirtualna nie powinna się wyświetlać, gdy zaznaczony jest element możliwy do edycji. Na przykład w arkuszu kalkulacyjnym, użytkownik może dotknąć komórki, aby uzyskać jej wartość w formule do kolejnej komórki. virtualkeyboardpolicy to atrybut, którego słowa kluczowe to ciągi znaków auto i manual Określona w elemencie, który jest hostem contenteditable, auto powoduje, że parametr odpowiedniego edytowalnego elementu, aby automatycznie wyświetlać klawiaturę wirtualną, gdy jest zaznaczona, lub klikasz, a manual usuwa zaznaczenie i klika element możliwy do edycji od zmian w wirtualnym obecny stan klawiatury.

<!-- 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>

Prezentacja

Jak działa interfejs VirtualKeyboard API, można zobaczyć w demonstracja dotycząca Glitcha. Zapoznaj się z kod źródłowy, by zobaczyć, jak został zaimplementowany. Zdarzenia geometrychange można obserwować w umieszczonym elemencie iframe, ale klawiatura wirtualna wymaga otwarcia wersji demonstracyjnej w osobnej karcie przeglądarki.

Przydatne linki

• Specyfikacja
• Repozytorium
• Wpis ChromeStatus
• Błąd Chromium
• Sprawdzenie przez W3C TAG
• Żądanie pozycji w standardzie Mozilla
• Żądanie pozycji w standardzie WebKit

Podziękowania

Interfejs VirtualKeyboard API został opracowany przez Anupama Snigdhę z firmy Microsoft przy pomocy były redaktor Grisha Lyukshin, podobnie jak z firmy Microsoft. Baner powitalny: @freestocks w Odchylenie.