Положение: исправлено в iOS5 Перемещается, когда фокус ввода - PullRequest
Новая
       7

Положение: исправлено в iOS5 Перемещается, когда фокус ввода

15 голосов
/ 09 ноября 2011

У меня есть div в верхней части моего мобильного приложения, который находится в позиции: исправлен, поэтому он останется в верхней части браузера (он прокручивается в ios 4 и ниже, что нормально).Когда ввод сфокусирован и вызывает клавиатуру, div перемещается вниз к середине страницы.Смотрите скриншоты:

http://dbanksdesign.com/ftp/photo_2.PNG

Редактировать: Вот упрощенная тестовая страница: http://dbanksdesign.com/test/

<body>
<div class="fixed"><input type="text" /></div>
<div class="content"></div>
</body>

.fixed { position:fixed; top:0; left:0; width:100%; background:#ccc; }
.content { width:100%; height:1000px; background:#efefef; }

Ответы [ 6 ]

9 голосов
/ 01 декабря 2011

К сожалению, вам лучше всего использовать absolute позиционирование для ваших fixed элементов при работе с IOS. Да, IOS5 утверждает, что поддерживает позиционирование fixed, но все это падает, когда у вас есть интерактивные элементы управления в этом фиксированном элементе.

У меня была такая же проблема с окном поиска на моем switchitoff.net сайте. В IOS5 фиксированный заголовок будет перемещаться вниз по странице, если окно поиска получит фокус при прокрутке страницы. Я пробовал различные обходные пути, и тот, который у меня сейчас есть, это <div>, который находится над окном поиска. При нажатии на <div> происходит следующее:

  1. Страница прокручивается вверх
  2. Заголовок fixed изменен на absolute
  3. <div>, скрывающий окно поиска, скрыт
  4. Поиск <input> сфокусирован

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

Есть еще одна хитрая проблема с IOS5 и фиксированным позиционированием. Если в области fixed есть элементы, по которым можно нажимать, а за ними прокручиваются элементы body, это может нарушить сенсорные события.

Например, на switchitoff.net кнопки на фиксированном заголовке стали неактивными, когда за ними прокручивались интерактивные элементы. touchstart даже не было запущено, когда эти кнопки были нажаты. К счастью, onClick, похоже, все еще работает, хотя это всегда последнее средство для IOS из-за задержки.

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

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

6 голосов
/ 01 ноября 2012

Используя рекомендацию JohnW для использования absolute вместо fixed, я нашел этот обходной путь:

Сначала настройте bind, чтобы определить, когда вход находится в режиме onFocus, прокрутите до верхней части страницы и измените элемент position на absolute: 

$('#textinput').bind('focus',function(e) { 
  $('html,body').animate({
        scrollTop: 0
   });
  $('#textinput-container').css('position','absolute');
  $('#textinput-container').css('top','0px');
});

Обратите внимание, что я использую идентификатор textinput для ввода и textinput-container для верхней панели div, содержащей вход.

Установите другую привязку, чтобы определить, когда вход больше не находится в фокусе, чтобы изменить положение деления обратно на fixed

$('#textinput').bind('blur',function(e) { 
   $('#textinput-container').css('position','fixed');
  $('#textinput-container').css('top','0px');
});

Я использовал аналогичное решение для панели, закрепленной в нижней части страницы, опубликованный код должен работать для панели, закрепленной в верхней части, но я не проверял ее

2 голосов
/ 07 апреля 2014

Модифицированная версия решения Паблобарта, но без прокрутки вверх: 

// Absolute position
$('#your-field').bind('focus',function(e) { 
    setTimeout(function(){
        $('section#footer').css('position','absolute');
        $('section#footer').css('top',($(window).scrollTop() + window.innerHeight) - $('section#footer').height());
    }, 100);
});

// Back to fixed position
$('#your-field').bind('focusout',function(e) { 
    $('section#footer').removeAttr('style');
});

Простой CSS: section # footer * {position: fixed;внизу: 0;Слева направо: 0;высота: 42px} *

1 голос
/ 28 февраля 2013

Это решение хорошо работает для меня.Все, что делает код, это ждет, пока пользователь нажмет на текстовое поле, а затем изменит элемент, идентифицируемый параметром 'jQuerySelector', с фиксированной позиции на статическую.Когда текстовое поле теряет фокус (пользователь нажал на что-то еще), позиция элемента изменяется на «фиксированная».

// toggles the value of 'position' when the text field gains and looses focus
var togglePositionInResponseToInputFocus = function(jQuerySelector)
{
   // find the input element in question
   var element = jQuery(jQuerySelector); 

   // if we have the element
   if (element) {

      // get the current position value 
      var position = element.css('position'); 

      // toggle the values from fixed to static, and vice versa
      if (position == 'fixed') {
          element.css('position', 'static'); 
      } else if (position == 'static') {
          element.css('position', 'fixed'); 
      }
    }
};

И соответствующие обработчики событий: 

var that = this; 

// called when text field gains focus
jQuery(that.textfieldSelector).on
(
    'focusin', 
    function()
    {
        togglePositionInResponseToInputFocus(that.jQuerySelector); 
    }
);

// called when text field looses focus
jQuery(that.textfieldSelector).on
(
   'focusout',
    function()
    {
        togglePositionInResponseToInputFocus(that.jQuerySelector); 
    }
 );
0 голосов
/ 04 февраля 2014

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

0 голосов
/ 23 февраля 2012

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

Если вы можете догадаться, на сколько кнопку переместилась (основываясь на том, на сколько переместился контент), вы можете нажать на нее.невидимая кнопка, и она будет работать нормально.Другими словами, если содержимое прокручивается на 50 пикселей, нажмите кнопку на расстоянии 50 пикселей от кнопки, и она будет работать.

Вы можете прокрутить содержимое вручную (даже на небольшое количество), и кнопки снова будут работатькак и ожидалось.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...