Недавно я столкнулся с этой проблемой при разработке игры, в которой пользователь объединяет устройства с помощью WebSockets. К сожалению, ни одно из упомянутых выше решений не работает.
Короче говоря, в игре участвовал пользователь, подписывающийся на канал через форму на своем телефоне. После подписки они встряхивают устройство, и на их рабочем столе разворачивается сценарий. Проблема заключалась в том, что каждый раз, когда кто-то встряхивал устройство iOS, появлялось предупреждение «отменить ввод».
Вот только два решения, которые я нашел для этой проблемы.
Предотвратите ваш ввод от потери фокуса. Это потребует от вас запрета отправки формы, если ввод является частью формы. Вы также должны прослушивать «touchstart» вместо «click» на любых привязках и предотвращать распространение события touchstart. Это предотвратит фокусировку этого якоря, а ваш ввод потеряет фокус. Такой подход наверняка имеет некоторые недостатки.
Добавить обработчик события «keydown» в окно и предотвратить распространение события. Это предотвращает вставку любых значений во входные данные на устройствах iOS. Я также должен был создать объект, который сопоставил коды клавиш с соответствующим символом. Это маршрут, который я закончил, потому что все, что мне было нужно для ввода, было 6-значным кодом, поэтому мне нужны были только цифры. Если вам нужно больше, чем просто цифры, это может быть боль в заднице. Нажав клавишу, поймайте этот символ с помощью кода клавиши и установите значение для ввода. Это заставляет iOS думать, что никакое значение не было введено во ввод с клавиатуры, поэтому отменить его нечего.
Имейте в виду, что предотвращение распространения события нажатия клавиш не препятствует вводу данных в стандартном браузере Android, поэтому оно будет нормально функционировать. Но это нормально, так как это не проблема Android. Вы можете предотвратить вставку повторяющихся значений, прослушивая событие ввода на самом входе и удаляя прослушиватель клавиатуры, если это событие получено.
var codes = {
48: 0,
49: 1,
50: 2,
51: 3,
52: 4,
53: 5,
54: 6,
55: 7,
56: 8,
57: 9
},
myInput = document.getElementById("myInput");
var keydownHelper = function (e) {
e.preventDefault();
myInput.removeEventListener("input", inputHelper);
var val = myInput.value;
// Delete
if (e.keyCode === 8 && val.length) {
myInput.value = val.slice(0, val.length - 1);
return;
}
// If not a number, do nada
if (typeof codes[e.keyCode] === "undefined") { return; }
val += codes[e.keyCode];
myInput.value = val;
};
var inputHelper = function (e) {
e.preventDefault();
window.removeEventListener("keydown", keydownHelper);
};
myInput.addEventListener("input", inputHelper);
window.addEventListener("keydown", keydownHelper);