Как отключить всплывающее окно «сохранить изображение как» для смартфонов для «ввода»

На созданной мной веб-странице я использую тег input с исходным изображением. При слишком долгом нажатии кнопки на смартфонах появляется всплывающее окно с «сохранить как» и т. д.

Я искал варианты, чтобы этого не происходило, поскольку пользователю нужно удерживать кнопки нажатыми, потому что это своего рода игра.

Я уже поместил эти команды в тег CSS при вводе, но всплывающие окна все еще появляются:

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

Я не могу использовать pointer-events:none;, так как он отключает нажатие кнопки на компьютере

пожалуйста, дайте мне знать, если вы знаете, как это исправить, у меня была такая же проблема, когда я использовал тег

(ps, я позволил кнопке работать, связав ее с JavaScript с помощью команд $('#ID').mousedown, up и leave)

Вот изображение всплывающего окна, которого я пытаюсь избежать, если вы не понимаете, о чем я говорю.

пример

В соответствии с запросом, вот как я использую тег ввода, тег img также дал ту же проблему, когда я использовал его таким же образом.

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

javascript html jquery css smartphone
person Cpt. Pineapple    schedule 04.09.2014    source источник
comment
На веб-странице, которую я создал, я использую входной тег с изображением в качестве источника, можете ли вы показать эту реализацию здесь? Возможно, самым простым решением будет изменить это.   -  person Nico O    schedule 04.09.2014
comment
@NicoO Я добавил код, который использовал, я хочу, чтобы изображение оставалось измененным, пока кнопка нажата   -  person Cpt. Pineapple    schedule 04.09.2014

Ответы (3)


arrow_upward
1
arrow_downward

Я не могу проверить это, но это стоило бы попробовать.

Я предполагаю, что <input type="image" /> обрабатывается вашим браузером как <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/

person Nico O    schedule 04.09.2014
comment
Спасибо, я только что закончил его реализацию. Это менее удобно, чем то, что я делал раньше, но оно работает, так что это здорово. В чем преимущество/отличие метода смены картинки от того, что я использовал? не делает ли это более или менее то же самое? - person Cpt. Pineapple; 05.09.2014
comment
@ Ананас, это хороший вопрос. Никаких реальных преимуществ у вашего метода нет. Поскольку контекстное меню, с которым у вас возникла проблема, является контекстным меню изображения, я предположил, что изображение типа ввода обрабатывается как изображение. С помощью метода в моем ответе у браузера нет контекста для отображения этого меню. Рад, что это сработало - person Nico O; 05.09.2014
comment
Будет ли ваш метод лучше для быстрого времени отклика или нет? Я уже пробовал предварительно загружать изображения, которые используются как src, выполнив [var dancerz= new Image(); dancerz.src = dancerz.png] (в javascript) Для каждого отдельного src, но я не знаю, заставляет ли изменение src изображения загружать (и загружать с сервера?) снова или использовать загруженный. - person Cpt. Pineapple; 05.09.2014
comment
Когда вы загружаете файл css с изображениями в заголовке вашего документа, у вас может быть небольшой скачок производительности. Но особо не стоит упоминать. Вы должны смотреть на Sprites для плавного обмена изображениями - person Nico O; 05.09.2014
comment
Вау, я не знал об этом! Я собираюсь попробовать использовать это. изображения имеют одинаковый размер, поэтому он должен работать с этим. спасибо большое дружище ты мне очень помог! - person Cpt. Pineapple; 06.09.2014

arrow_upward
0
arrow_downward

Другой простой обходной путь заключается в следующем: добавьте a или a в качестве родителя для получения событий щелчка мыши, затем установите css как: pointer-events: none;

person RainCast    schedule 20.08.2019

arrow_upward
-2
arrow_downward

почему бы вам не использовать «pointer-events:none» внутри медиаконтейнера, чтобы он применялся только к смартфонам?

@media (max-width: 767px) {
    input {
        pointer-events: none;
    }
}
person chaseha    schedule 04.09.2014
comment
Я проверил это и использовал события-указатели: none; также отключает кнопки для смартфонов - person Cpt. Pineapple; 04.09.2014
comment
@Moogs явно означает, что медиаконтейнер не отключит нажатие кнопки на компьютере. Извините, я не мог помочь. - person chaseha; 04.09.2014