contextmenu

L'attribut universel contextmenu correspond à l'identifiant d'un élément <menu> qu'on souhaite utiliser comme menu contextuel pour l'élément courant.

Un menu contextuel est un menu qui apparaît suite à une action utilisateur (par exemple un clic-droit). HTML5 permet désormais de personnaliser ce menu.

Exemples

Voici quelques exemples de personnalisations de menus. Le code HTML pourra être :

HTML

<body contextmenu="share">
  <menu type="context" id="share">
    <menu label="Partager">
      <menuitem label="Twitter" onclick="shareViaTwitter()"></menuitem>
      <menuitem label="Facebook" onclick="shareViaFacebook()"></menuitem>
    </menu>
  </menu>
  <ol>
    <li>
      Dans cet exemple, vous pouvez partager un lien vers
      cette page sur Facebook et/ou Twitter via le groupe Partager
      du menu contextuel
    </li>
    <li>Sur cette ligne : on peut partager la page sur Twitter ou Facebook grâce au menu Partager du menu contextuel.</li>
    <li><pre contextmenu="changeFont" id="fontSizing">Sur cette ligne : on peut changer la taille de la police en utilisant les options "Augmenter/Réduire la taille de la police" du menu contextuel</pre></li>
    <menu type="context" id="changeFont">
      <menuitem label="Augmenter la taille de la police" onclick="incFont()"></menuitem>
      <menuitem label="Réduire la taille de la police" onclick="decFont()"></menuitem>
    </menu>
    <li contextmenu="ChangeImage" id="changeImage">Sur cette ligne : on peut  utiliser l'option "Changer l'image" du menu.</li><br />
    <img src="https://developer.mozilla.org/media/img/promote/promobutton_mdn5.png" contextmenu="ChangeImage" id="promoButton" />
    <menu type="context" id="ChangeImage">
      <menuitem label="Changer l'image" onclick="changeImage()"></menuitem>
    </menu>
  </ol>
</body>

JavaScript

function shareViaTwitter() {
  window.open("https://twitter.com/intent/tweet?text=" +
      "Je découvre ContextMenu avec MDN.");
}

function shareViaFacebook() {
  window.open("https://facebook.com/sharer/sharer.php?u=" +
      "https://developer.mozilla.org/fr/docs/Web/HTML/Attributs_universels/contextmenu");
}
function incFont(){
  document.getElementById("fontSizing").style.fontSize="larger";
}

function decFont(){
  document.getElementById("fontSizing").style.fontSize="smaller";
}

function changeImage(){
  var j = Math.ceil((Math.random()*39)+1);
  document.images[0].src="https://developer.mozilla.org/media/img/promote/promobutton_mdn" + j + ".png";
}

Résultat

Spécifications

Spécification	État	Commentaires
WHATWG HTML Living Standard La définition de 'contextmenu' dans cette spécification.	Standard évolutif	Pas de modification depuis le dernier état de HTML5.1
HTML5.1 La définition de 'contextmenu' dans cette spécification.	Version de travail	Dérivation de WHATWG HTML Living Standard, définition initiale.

Fonctionnalité	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Support simple	Pas de support^[1]	9 (9)	Pas de support	Pas de support^[1]	Pas de support

Fonctionnalité	Android	Chrome pour Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Support simple	Pas de support	Pas de support	20 (20)	Pas de support	Pas de support	?

[1] Une implémentation expérimentale est disponible en ligne de commande via l'option --enable-blink-features=ContextMenu. Jusqu'à Chrome 52 et Opera 39, cette fonctionnalité était également disponible via la préférence « Activer les fonctionnalités expérimentales de Web Platform » mais cela a été retiré en raison d'un problème de compatibilité web. La prise en charge de cette fonctionnalité est demandée avec Chromium bug 87553.