Bu sayfa, Cloud Translation API ile çevrilmiştir.

VirtualKeyboard API ile tam kontrol

Thomas Steiner

Twitter GitHub Glitch Mastodon Ana Sayfa

Tarayıcı Desteği

Tabletler veya cep telefonları gibi cihazlar genellikle metin yazmak için sanal bir klavyeye sahiptir. Her zaman mevcut ve her zaman aynı olan fiziksel klavyenin aksine, kullanıcının işlemlerine bağlı olarak sanal klavye görünür ve kaybolur. Bu klavye, örneğin inputmode özelliğine göre dinamik olarak da uyarlanabilir.

Bu esneklik, tarayıcı düzen motorunun sanal klavyenin varlığından haberdar edilmesi ve bunu telafi etmek için belgenin düzenini ayarlaması gerekmesinden kaynaklanmaktadır. Örneğin, kullanıcının yazı yazmak üzere olduğu giriş alanı, sanal klavye tarafından gizlenebilir. Bu nedenle tarayıcının bu alanı kaydırarak görünüm içine girmesi gerekir.

Geleneksel olarak, tarayıcılar bu zorlukla kendi başlarına başa çıkmakta, ancak daha karmaşık uygulamalar tarayıcının davranışı üzerinde daha fazla kontrol sahibi olmanızı gerektirebilir. Buna örnek olarak, geleneksel yaklaşımın yalnızca bir ekran segmentinde gösterilmesi ancak kullanılabilir görüntü alanının her iki ekranda da küçültülmesi durumunda ekran alanının "boşa" olmasına yol açacağı çok ekranlı mobil cihazlar verilebilir. Aşağıdaki resimde, sanal klavyenin varlığını telafi etmek üzere belgenin düzenini dinamik olarak optimize etmek için VirtualKlavye API'nin nasıl kullanılabileceği gösterilmektedir.

Geleneksel yaklaşım,

VirtualKlavye API bu gibi durumlarda devreye girer. Anket üç bölümden oluşur:

JavaScript'ten sanal klavyeye programatik erişim için navigator nesnesindeki VirtualKeyboard arayüzü.
Sanal klavyenin görünümü hakkında bilgi sağlayan CSS ortam değişkenleri grubu.
Sanal klavyenin gösterilip gösterilmeyeceğini belirleyen bir sanal klavye politikası.

Mevcut durum

VirtualKlavye API'si, masaüstü ve mobil cihazlarda Chromium 94'te kullanılabilir.

Özellik algılama ve tarayıcı desteği

Mevcut tarayıcıda VirtualKlavye API'nin desteklenip desteklenmediğini tespit etmek için aşağıdaki snippet'i kullanın:

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

VirtualKlavye API'sini kullanma

VirtualKlavye API'si, navigator nesnesine yeni bir arayüz VirtualKeyboard ekler.

Yeni sanal klavye davranışını etkinleştirme

Tarayıcıya, sanal klavyeyle ilgili kapatma işlemlerini kendiniz yaptığınızı bildirmek için önce overlaysContent boole özelliğini true değerine ayarlayarak yeni sanal klavye davranışını etkinleştirmeniz gerekir.

navigator.virtualKeyboard.overlaysContent = true;

Sanal klavyeyi gösterme ve gizleme

show() yöntemini çağırarak sanal klavyeyi programatik olarak gösterebilirsiniz. Bunun işe yaraması için, odaklanılan öğenin bir form kontrolü (textarea öğesi gibi) veya düzenleme ana makinesi olması (örneğin, contenteditable özelliğini kullanarak) olması gerekir. Bu yöntem her zaman undefined döndürür, ancak sanal klavye daha önce gösterilmediyse bir geometrychange etkinliğini tetikler.

navigator.virtualKeyboard.show();

Sanal klavyeyi gizlemek için hide() yöntemini çağırın. Yöntem her zaman undefined değerini döndürür ancak sanal klavye daha önce gösterilmişse bir geometrychange etkinliğini tetikler.

navigator.virtualKeyboard.hide();

Geçerli geometriyi alma

boundingRect özelliğine bakarak sanal klavyenin mevcut geometrisini öğrenebilirsiniz. Sanal klavyenin mevcut boyutlarını DOMRect nesnesi olarak gösterir. Ek, üst, sağ, alt ve/veya sol özelliklere karşılık gelir.

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

Geometri değişikliklerinden haberdar olma

Sanal klavye göründüğünde veya kaybolduğunda geometrychange etkinliği gönderilir. Etkinliğin target özelliği, yukarıda açıklandığı gibi DOMRect olarak sanal klavye eklemesinin yeni geometrisini içeren virtualKeyboard nesnesini içerir.

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

CSS ortam değişkenleri

VirtualKlavye API'si, sanal klavyenin görünümü hakkında bilgi sağlayan CSS ortam değişkenlerini gösterir. inset CSS özelliğine benzer şekilde, yani üst, sağ, alt ve/veya sol özelliklerine karşılık gelen modellenmişlerdir.

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

Sanal klavye iç öğeleri, görüntü alanının kenarından üst, sağ, alt ve sol eklerinden bir dikdörtgen tanımlayan altı ortam değişkenidir. Genişlik ve yükseklik eklemeleri, geliştiricinin ergonomisi için diğer kümelerden hesaplanır. Bir yedek değer sağlanmamışsa her klavye ekinin varsayılan değeri 0px olur.

Ortam değişkenlerini genellikle aşağıdaki örnekte olduğu gibi kullanırsınız:

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

Sanal klavye politikası

Bazen, düzenlenebilir bir öğeye odaklanıldığında sanal klavye görünmez. Kullanıcının başka bir hücrenin formülünde yer alacak değeri görmek için hücreye dokunabileceği bir e-tablo uygulaması buna örnek olarak verilebilir. virtualkeyboardpolicy, anahtar kelimeleri auto ve manual dizeleri olan bir özelliktir. contenteditable ana makinesi olan bir öğede belirtildiğinde auto, karşılık gelen düzenlenebilir öğenin odaklanıldığında veya dokunulduğunda sanal klavyeyi otomatik olarak göstermesine neden olur ve manual, sanal klavyenin mevcut durumundaki değişikliklerden odağı ayırıp düzenlenebilir öğeye dokunur.

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

Demo

VirtualKlavye API'yi Glitch'teki bir demoda çalışırken görebilirsiniz. Nasıl uygulandığını görmek için kaynak kodu incelemeyi unutmayın. iframe yerleştirmede geometrychange etkinlikleri gözlemlenebilir ancak gerçek sanal klavye davranışı, demonun kendi tarayıcı sekmesinde açılmasını gerektirir.

Faydalı bağlantı

Teşekkür

VirtualKlavye API'sini, Microsoft'tan Anupam Snigdha, eski editör Grisha Lyukshin'in ve aynı şekilde Microsoft'un katkılarıyla ortaya koydu. Unsplash'te @freestocks tarafından yüklenen hero resim.