virtualkeyboardpolicy

Description

L’attribut virtualkeyboardpolicy définit si le clavier virtuel s’affiche automatiquement lorsqu’un élément éditable reçoit le focus (auto) ou s’il doit être déclenché manuellement via l’API JavaScript VirtualKeyboard (manual). Il s’applique aux éléments avec contenteditable et aux champs <input> / <textarea>.

Syntaxe

<div contenteditable virtualkeyboardpolicy="manual">Éditeur personnalisé</div>
<input type="text" virtualkeyboardpolicy="auto">

Valeurs

Valeur	Comportement
auto	Le clavier virtuel s’affiche automatiquement au focus (comportement par défaut)
manual	Le clavier virtuel ne s’affiche pas automatiquement — contrôle via navigator.virtualKeyboard

Exemples

Éditeur de texte riche avec clavier géré manuellement :

<div id="editeur"
     contenteditable
     virtualkeyboardpolicy="manual"
     role="textbox"
     aria-multiline="true">
  Contenu éditable…
</div>

<script>
  const editeur = document.getElementById('editeur');

  editeur.addEventListener('click', () => {
    navigator.virtualKeyboard.show();
  });

  navigator.virtualKeyboard.addEventListener('geometrychange', (e) => {
    const { height } = e.target.boundingRect;
    editeur.style.marginBottom = height + 'px';
  });
</script>

Notes

API VirtualKeyboard : en mode manual, utilisez navigator.virtualKeyboard.show() et navigator.virtualKeyboard.hide() pour afficher ou masquer le clavier programmatiquement.

Repositionnement du contenu : l’événement geometrychange sur navigator.virtualKeyboard permet d’adapter la mise en page en fonction de la zone occupée par le clavier, utile pour les éditeurs plein écran.

Support limité : pris en charge principalement dans les navigateurs Chromium sur appareils tactiles. Vérifiez la disponibilité de navigator.virtualKeyboard avant utilisation.