Can someone explain what the contextmenu attribute in HTML5 does?

Question

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

Answer 1

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.

Answer 2

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

Answer 3

<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

Answer 4

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

Answer 5

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.

Answer 6

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.