Мобильный Safari - входная панель не прокручивается вместе с переполнением-прокрутка: touch

только одно обходное решение, которое я нашел-при прокрутке события, чтобы проверить, сфокусирован ли ввод с типом text, установите фокус на каком-либо другом элементе (например, на кнопке). В результате виртуальная клавиатура и курсор исчезнут. Это решение не идеально, но оно не выглядит так ужасно, как с курсорами поверх формы. Пример:

$(".scrollContainer").scroll(function () {
  var selected = $("input[type='text']:focus");
  if (selected.length > 0) {
      $('#someButton').focus();
  }
}

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

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

Это дало мне идею-возможно, используя некоторый код JS, я мог бы изменить значение ввода, а затем быстро изменить его на текущее значение. Возможно, это заставит курсор выровнять себя так же, как и при ручном вводе текста.

Я проверил его и он работал. Вот как выглядит код:

       myIScroll.scrollToElement(element, scrollTime); // any scroll method call
       var scrollTime = 400;
       if (element.type && element.type == 'text') {
          var currentValue = $(element).val();
          $timeout(function(){
            $(element).val(currentValue + 'a').val(currentValue);
          }, scrollTime);
        }

это действительно ошибка на недавно выпущенной iOS 11.Я решил проблему на модальном, изменив css:

.modal {
  position:fixed;
  overflow-y: scroll;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  z-index: 99;
}

body {
  height: 100%;
  width:100%;
  overflow: hidden;
  position:fixed;
}

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

-webkit-overflow-scrolling: touch

и

-webkit-overflow-scrolling: auto

всякий раз, когда я фокусирую / размытие на входах

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

        $(document).on('scroll.inline-edit', function(event) {
            var selection = window.getSelection();
            if (selection.rangeCount) {
                var range = selection.getRangeAt(0);
                selection.removeAllRanges();
                selection.addRange(range);
            }
        });

при выходе из режима редактирования я удаляю обработчик событий:

        $(document).off('scroll.inline-edit');

это, вероятно, также будет работать, если обработчик событий всегда включен.

Я использую jQuery.анимация для прокрутки окна, и я не уверен, что это сработает, если вы не используете jQuery.одушевленный, но для меня это сработало. Я просто запускаю обработчики "размытия" на элементе, который на самом деле не заставляет элемент терять фокус, он просто запускает обработчики, как если бы они были естественным образом вызваны взаимодействием пользователя. Кажется :

$content.animate(
    {
        scrollTop: $(this).data('originalTop')
    }, 
    {
        duration: 100,
        easing: 'swing',
        always: function(){
            var $t = $(this);
            $t.trigger('blur');
        }
    }
);

из-за другой странности с iOS мне нужно сохранить смещение элемента().верхнее значение как originalTop когда мой форма загружается. $content - это просто прокручиваемый div, содержащий мою форму , например: $('div#content').

Это все еще, кажется, преследует формы webkit в iOS с -webkit-overflow-scrolling:touch, также в iOS 11. Основываясь на ответах выше, и так как это требует фокусировки input или textearea элемент для каретки, чтобы показаться неуместным, вот мой собственный подход "исправление" для него

$('input').on("focus", function(){
    var scrollTopVal =  $(elementSelector).scrollTop();
    $(elementSelector).scrollTop(scrollTopVal + 1);
    $(elementSelector).scrollTop(scrollTopVal);
})

здесь elementSelector указывает на элемент контейнера для входных элементов.

Это было некоторое время назад, и я думаю, что это было зафиксировано на IOS11.x, конечно, нам все еще нужно поддерживать старые версии, предложения выше дали мне подсказку, но ни один из них не работал 4 Моя настройка. Я использовал onFocus для запуска отложенной функции, которая добавляет / удаляет символ в текущее сфокусированное поле. Я использую плоский гибрид angularJS / iOS.

на моей стороне html

... setting up my form
<div ng-repeat="item in curReading.items"  >
      <label>{{item.lbl}}</label>
      <input type="text"
       ng-model="item.value"
       class="form-control"   
       onFocus="if(tweak4IOS == 1) setTimeout(pirouette_4_IOS, 1000);"
           placeholder="Enter Title"
          />
   </div>

на моей стороне JS соответствующий код

function pirouette_4_IOS()
{
  try
  {

    document.activeElement.value += 'x';
    document.activeElement.value = document.activeElement.value.slice(0,-1);
  }
  catch(err)
  {
    alert(err.message);
  }
  finally
  {
    tweak4IOS = 0;
  }
}  // --- end of pirouette_4_IOS---
...
var tweak4IOS = 0; // init the flag

наконец, в Obj - C я установил var в поп-клавиатура

- (void)keyboardDidShow:(NSNotification *)sender {
CGRect frame = [sender.userInfo[UIKeyboardFrameEndUserInfoKey] CGRectValue];

homeWeb.frame = CGRectMake(homeWeb.frame.origin.x, homeWeb.frame.origin.y,
                           homeWeb.frame.size.width , homeWeb.frame.size.height - frame.size.height     );

self.pinBottom2.constant = frame.origin.y;

// set the JS var so it is done only when keyboard pops initially
[homeWeb stringByEvaluatingJavaScriptFromString:@"tweak4IOS=1;"];