Backspace внутри элемента INPUT приводит к тому, что фиксированное положение DIV перемещается в курсор

Да. Звучит странно.

У меня есть приложение PhoneGap 2.1.0, работающее на iOS6 (iPhone5), и, к сожалению, я не могу тестировать его на другом устройстве (я проверю симулятор, когда вернусь домой).

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

Ожидаемый: последний символ удаляется.

Фактический: последний символ удаляется, и только если текст удаляется вне видимых границ элемента INPUT, «position: fixed;» заголовок приложения перемещается в позицию курсора ввода текста.

Вот экран: (извините, что стек не позволит мне опубликовать imgs)

У кого-нибудь есть идеи? Если вам нужна определенная часть HTML и / или CSS, которая отображает это, сообщите мне, и я отправлю его как можно скорее.

Достойно отметить:

  • Элементы ввода были переустановлены.
  • Свойство «-webkit-appearance» установлено на «none» для входных элементов.
  • Эта проблема согласована во всех элементах ввода (тип = текст, поиск, номер, телефон или электронная почта), даже в разных формах / экранах / страницах. Я предполагаю, что это свойство имеет к этому какое-то отношение, но я не могу себе представить, что. Я использовал это свойство в прошлом, без проблем.
  • Событие backspace функционирует так, как ожидалось, до тех пор, пока символ, который будет удален во входном элементе, не будет находиться за пределами видимых границ элемента.
  • На сайте также есть другие элементы DIV с фиксированной позицией, но только верхний столб / заголовок перемещается.

Идеи?

Это обходное решение работает для меня.

Добавьте их к затронутым входам:

-webkit-transform: translate3d(0,0,0); -webkit-backface-visibility: hidden; -webkit-perspective: 1000; -webkit-transform-style: flat; 

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

 $('#input_field').keyup(function(e) { if (e.keyCode === 8) { return $('#header').hide(0, function() { return $(this).show(); }); } }); 

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

  Modernizr.addTest('overflowscrolling', function(){ return Modernizr.testAllProps("overflowScrolling"); }); 

CSS

 .overflowscrolling .app-header { position: absolute; } .overflowscrolling #app-page { overflow: scroll; position:absolute; top:0px; bottom: 0px; left: 0px; right: 0px; -webkit-overflow-scrolling: touch; 

}

  • Как узнать, воспроизводит ли WKWebView аудио?
  • `-webkit-overflow-scrolling: touch` сломан для первоначальных внеэкранных элементов в iOS7
  • iOS 8 UIWebview Delegate: WebKit отменил неперехваченное исключение в webView: didFinishLoadForFrame:
  • Почему Apple относится к этим приложениям специально?
  • Способы улучшения производительности прокрутки UIWebView?
  • Не удалось выполнить команду com.apple.WebKit.WebContent
  • Удалить 3 пикселя в текстовом поле iOS / WebKit
  • Почему здесь не работает прокрутка импульса? (с использованием -webkit-overflow-scrolling: touch)
  • событие touchMove на мобильном сафари - приводит к перетаскиванию всей страницы
  • Прокрутка iOS Safari вверх не работает на определенных страницах. Зачем?
  • Не удалось воспроизвести WebKitLegacy - crash
  • Давайте будем гением компьютера.