Geek Answers Handbook

How to disable the Save Image As popup for smartphones for <input>

On the webpage, I used the tag inputas the image source. When the button is pressed too long on smartphones, a pop-up window appears with "Save As", etc.

I was looking for options to stop this, because the buttons must be pressed by the user, because it is a kind of game.

I already put these commands in the CSS tag in the input, but pop-ups still appear:

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

I can not use pointer-events:none;, because it disables the button click on the computer

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

(ps, I will let the button work by linking it to JavaScript using commands $('#ID').mousedown, upand leave)

Here is a popup image that I'm trying to avoid if you don't know what I'm talking about

example

As requested, here is how I use the input tag, the img tag also gave the same problem when I used it in 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");});
+4
source share
3 answers

I can't check it out, but it's worth a try.

I assume it <input type="image" />works in a browser like <img>.

, type="submit" type="button", . html css. , , :

HTML:

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

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/);
}

jQuery:

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

: http://jsfiddle.net/nr9ffw84/

+1

: a , CSS : pointer-events: none;

0

"-: " , ?

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

More articles:


All Articles