Can someone explain what the contextmenu attribute in HTML5 does?

can someone explain what the the contextmenu attribute does and if it can开发者_JAVA百科 be used with all the HTML elements and can someone point me to some online demos/examples?

---

The contextmenu attribute refers to the <menu> element the user agent should render when a context menu is requested by the user (e.g. using the right mouse button or the Menu/Hyper key on modern keyboards.

You can find an example here.

---

You can see how it may look like in this demo: https://bug617528.bugzilla.mozilla.org/attachment.cgi?id=554309

At the time of writing only FireFox 8 supports it.

---

The context menu appears when the user right-clicks on an interface element. The contextmenu attribute is the ID of a <menu> element to open when the user right clicks on the element with this attribute.

---

Quoting for you to understand easily:

The contextmenu attribute allows you to display a menu without taking up valuable UI space for the menu. It is a menu which fires on events, such as mouseup or keyup providing a bubble menu which provides options and actions based on those selections.

Source: http://net.tutsplus.com/tutorials/html-css-techniques/html5-globals-and-you/

See official link for more information:

http://www.w3.org/TR/html5/interactive-elements.html

---

The contextmenu should be used on an input field to specify which menu element is for the field. The menus look sort of like the right click menu or a dropdown box however they are not implemented in any browser yet so you should avoid using them.

This may help clear things up: http://dev.w3.org/html5/spec-author-view/interactive-elements.html

---

<form name="npc">
 <label>Character name: <input name="char" type="text" contextmenu="namemenu" required></label>
 <menu type="context" id="namemenu">
  <command label="Pick random name" onclick="document.forms.npc.elements.char.value = getRandomName()">
  <command label="Prefill other fields based on name" onclick="prefillFields(document.forms.npc.elements.char.value)">
 </menu>
</form>

http://www.w3.org/TR/html5/interactive-elements.html#context-menus