Search code examples
javascripthtmlcolor-picker

A hidden side menu and HTML5 colour conflict

I have a side menu which is hidden and controlled via click on an icon:

  <a href="#" onclick="openMenuNav()" title="open menu" id="openmenu"><i class="fa fa-caret-square-left" style="font-size:18px"></i></span>

The openMenuNav() is as follows:

function openMenuNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
document.body.style.backgroundColor = "rgba(0,0,0,0.4 )";
}

This functions fine except if I have a have an form with an input type of color it opens the standard color dialog box plus the side menu.

The code to call the color is

<input type="color" id="flat" name="colour" value="#000000" data-alias="" style="width:80px">

I would be grateful for solutions!

Solution

  • use preventDefault to prevent it's default action.

    document.querySelector('input').addEventListener('click', function(e) {
  e.preventDefault();
});
    <input type="color" id="flat" name="colour" value="#000000" data-alias="" style="width:80px">