Obsolète
Cette fonctionnalité est obsolète. Bien qu'encore supportée par des navigateurs, son utilisation est découragée pour tout nouveau projet. Évitez de l'utiliser.

Attention ! Cet attribut est obsolète et sera retiré de l'ensemble des navigateurs.

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
HTML Living Standard
La définition de 'contextmenu' dans cette spécification.
Standard évolutif Pas de modification depuis le dernier état de HTML 5.1
HTML 5.1
La définition de 'contextmenu' dans cette spécification.
Recommendation Dérivation de HTML Living Standard, définition initiale.

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple

522 3

Oui — 524

Non9 Non

392 6

Oui — 397

Non
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple Oui — 521 Oui — 524 Non32 — 565 Non Non Oui

1. Until version 52 (exclusive): this feature is behind the Enable experimental Web Platform features preference.

2. This was removed from the Enable Experimental Web Platform Features due to a Web compatibility issue. In June 2017, it was removed entirely from the browsers. This is documented in Chromium bug 87553.

3. From version 52: this feature is behind the --enable-blink-features runtime flag (needs to be set to ContextMenu).

4. Until version 52 (exclusive): this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.

5. Support for the contextmenu attribute has been removed from Firefox for Android (See bug 1424252).

6. From version 39: this feature is behind the --enable-blink-features runtime flag (needs to be set to ContextMenu).

7. Until version 39 (exclusive): this feature is behind the Enable experimental Web Platform features preference.

Voir aussi

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : SphinxKnight
 Dernière mise à jour par : SphinxKnight,