How to disable the 'save image as' popup f

Question

On a webpage I made I use the input tag with as source an image. When the button is pressed too long on smartphones there is a popup window with "save as" etc.

I searched for options to stop this from happening as buttons need to be kept pressed down by the user because it's a kind of game.

I already put these commands in the CSS tag on input but there still appear popups:

-webkit-touch-callout:none; 
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select:none;

I can't use pointer-events:none; as it disables clicking on the button on computer

please let me know if you know how to fix this, I had the same problem when I used an tag

(ps, I let the button work by linking it to JavaScript with the $('#ID').mousedown, up and leave commands)

Here is an image of the popup I'm trying to avoid incase you don't know what I'm talking about

As requested, here is the way I use the input tag, the img tag also gave the same problem work when I used it the same way

html:
<input type="image" src="up.png"     class="UpKeyImage" id="Up">

javascript (with jquery):
$('#Up').mousedown(function() {$("#Dancer").attr("src","dancerup.png");});
$('#Up').mouseup(function() {$("#Dancer").attr("src","dancer.png");});
$('#Up').mouseleave(function() {$("#Dancer").attr("src","dancer.png");});

Answer 1

why don't you use 'pointer-events:none' inside of a media container so it only applies to smartphones?

@media (max-width: 767px) {
    input {
        pointer-events: none;
    }
}

Answer 2

I can not test it, but this would be worth a try.

I assume that <input type="image" /> is beeing treaded like an <img> by your browser.

To prevent this, you can change your input type to type="submit" or type="button" which should not show the image context menu. For this to work you will have to alter your html and your css. This is not really more correct than your solution, but it should help you at your problem:

HTML:

<input type="button" class="UpKeyImage" id="Up" value="Up" />

New CSS:

.UpKeyImage {
    /*this will hide the value*/
    text-indent: -999em;
    overflow: hidden;
    text-align: left;
    /*Downside of this solution, you will need to define the width and height*/
    width: 400px;
    height: 200px;
    /*this will be dancerup.png*/
    background-image: url(http://lorempixel.com/400/200/);
    border: none;
    background-color: transparent;
    box-shadow: none;
}
.UpKeyImage.dance-up {
    /* path to the other image */
    background-image: url(http://lorempixel.com/sports/400/200/);
}

And some new jQuery:

$(function () {
    $('#Up')
    .mouseup(function () {
        $(this).removeClass("dance-up");
    })
    .mouseleave(function () {
        $(this).removeClass("dance-up");
    })
    .mousedown(function () {
        $(this).addClass("dance-up");
    });
});

Here is a demo: http://jsfiddle.net/nr9ffw84/