Tarayıcı Desteği
- 94
- 94
- x
- x
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.
VirtualKlavye API bu gibi durumlarda devreye girer. Anket üç bölümden oluşur:
- JavaScript'ten sanal klavyeye programatik erişim için
navigator
nesnesindekiVirtualKeyboard
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ı
- Spesifikasyon
- Depo
- ChromeStatus girişi
- Chromium hatası
- W3C TAG incelemesi
- Mozilla standartları konum isteği
- WebKit standart konum isteği
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.