Предотвращение прокрутки страницы при переключении фокуса

Я новичок в мобильной сети /dev. Мое приложение использует jquery-mobile, phonegap и Compass (scss).

У меня есть проблема на моей странице входа:

логотип и поля содержатся в стандартных контейнерах "div" (data-role = "content" data-type = "vertical" ). Фон окрашен.

при переключении фокуса с поля ввода в поле пароля, страница соскальзывает, что я не хочу делать. Я бы хотел, чтобы мой логотип и поля оставались на месте, точно так же как страница входа в Skype iOS App.

вот что происходит:

Я пробовал несколько трюков, пытаясь заблокировать события прокрутки или принудительно прокручивая страницу до 0,0, без успеха.

Теперь я думаю о новой стратегии, возможно, используя верхнее относительное позиционирование для логотипа и полей и захватывая фокусные события, чтобы прокручивать страницу самостоятельно, при нажатии на клавиатуру (путем анимации верхних относительных координат позиционирования).

Хотя это кажется выполнимым, мне интересно, является ли это той работой, которую использует команда Skype iOS App...

Любые советы по технике, используемой в данном конкретном случае, приветствуются!

веселит,

Фред

Ответ 1

Я думаю, что вы хотите вызвать фокус на элементе напрямую и использовать опцию "protectScroll".

el.focus({preventScroll: true});

$('#el').focus((e) => {
  e.preventDefault();
  e.target.focus({preventScroll: true});
})

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus

Ответ 2

Я еще не тестировал это, но действительно ли e.preventDefault() останавливает проблему? Как правило, вы используете e.preventDefault(), чтобы остановить поведение прокрутки/перетаскивания по умолчанию.

$(document).bind('focus', function(e){
  e.preventDefault();
});

или лучше

$(element).bind('focus', function(e){
  e.preventDefault();
});

или

$(document).bind('touchstart', function(e){
  e.preventDefault();
});

Будет ли поле ввода работать лучше?

$(":input").live({
  focus: function(e) {
    e.preventDefault();
  }
});

Ответ 3

Мне, наконец, не удалось найти какое-либо решение для обработки моей проблемы, но я заметил, что хирургическое позиционирование позволило мне фризировать экран при переключении между полями.

Пространство, доступное для всего экрана входа, не должно превышать пространство, доступное после того, как клавиатура будет видна, то есть 200 пикселей. Кроме того, чтобы предотвратить прокрутку при переключении, последнее центральное положение поля ввода не должно превышать 100 пикселей. Используя CSS, вы можете играть с заполнением и разметкой для достижения желаемого результата.

Должно быть возможно получить дополнительное вертикальное пространство, удалив клавиатуру "панель навигации полей", но я не знаю, как это сделать:/

Ответ 4

У меня была похожая проблема (с прокруткой страницы при клике/фокусе), и мне потребовалось некоторое время, чтобы найти решение, поэтому я документирую ее здесь.

У меня было настраиваемое поле формы, которое при нажатии прокручивало страницу до самого верха. Оказывается, что ввод был скрыт с помощью position: absolute; top: -99999999px; (потому что, если вы спрячете его правильно, события фокуса не будут работать). Это поместило скрытый ввод вверху страницы. Затем, когда мы щелкнули ярлык и фокус был сфокусирован, страница была прокручена до самого верха.

Я искал такие вещи, как "Прокрутка вверх по фокусу/клику" и все виды, но я не мог найти ничего приличного. Решением было использовать вместо него right: -99999999px. Я избегал использования типичного left: -9999999px, потому что, очевидно, это может повлиять на сайт при использовании direction: rtl;