2013-10-15 4 views
1

Я использую Worklight 6.0.0.1 Enterprise Edition и обновляю существующее приложение для работы с iOS7. Приложение построено на Dojo и специально использует инфраструктуру dojox/app.Worklight 6.0.0.1 и iOS 7 Keyboard

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

В iOS 7 клавиатура просто появляется на экране. Вид не прокручивается вверх, и если поле ввода находится в нижней части экрана, оно покрывается клавиатурой. Хуже того, если клавиатура закрывает поле, он теряет фокус, а это означает, что все поля в нижней части экрана нельзя манипулировать. Один из способов я обнаружил, чтобы установить высоту в мета-тег:

<meta content="height=device-height, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" name="viewport">

Это хорошо работает, пока не изменится альбомной ориентации на устройстве. Когда я открываю и закрываю клавиатуру в портретном режиме, экран не корректируется обратно до нужного размера, а dojox/mobile/ScrollableView (содержащий весь контент) остается нажатым вверх. Под клавиатурой была пустая панель.

Думаю, что это может быть связано с нашим приложением. Я попытался выполнить тест с новым приложением для работы с цветом. Я создал новый проект и добавил текст в основной файл HTML вместе с текстовым полем ввода внизу. Результат был аналогичен приведенному выше сценарию. В этом случае представление выдвигается вверх, и dojox/mobile/ScrollableView, содержащий контент, слишком сильно сдвинут. Между прокручиваемым представлением и клавиатурой есть пустая панель.

Я видел несколько связанных с клавиатурой и прокруткой потоков, включая предложения по настройке параметров в config.xml: KeyboardShrinksView, HideKeyboardFormAcccessoryBar и DisallowOverscroll. Ни один из них не решил проблемы.

К сожалению, я не могу опубликовать скриншоты, чтобы показать вам именно то, что я вижу (не хватает очков репутации), но вот тело очень простого тестового приложения я упоминал выше:

<body id="content" style="display: none;"> 
    <div data-dojo-props="selected:true" data-dojo-type="dojox.mobile.ScrollableView" id="view0"> 
      <!--application UI goes here--> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
      <br /> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
      <br /> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
      <br /> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
      <br /> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
      <br /> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
      <br /> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
      <br /> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
      <br /> 
      <input data-dojo-type="dojox/mobile/TextBox"></input> 
     </div> 
    <script src="js/initOptions.js"></script> 
     <script src="js/KeyboardTest.js"></script> 
     <script src="js/messages.js"></script> 
</body> 

Я бы очень ценят любые предложения или кивают в правильном направлении.

Спасибо, Chris

+0

у нас была проблема, за исключением того, что клавиатура была толчок используя нашу вкладку и блокируя наши поля. То, как мы обходились сейчас, состоит в том, чтобы скомпилировать с помощью xcode4.6 с iphone 6 sdk – tik27

+0

Вы пытались БЕЗ Dojo? –

+0

Также, главный ответ здесь поможет вам: http://stackoverflow.com/questions/18970865/ios-7-input-elements-moving-fixed-positioned-elements –

ответ

1

EDIT: этот ответ имеет место для Кордова 3.1 и Dojo 1.9.1+.

Во втором раунде экспериментов и испытаний с Кордовой 3.1 на iPhone и IPad под прошивкой 7, следующая сделал трюк:

Do не определить высоту: устройство-высоту в мета-теге, в то время как добавление к вашим входным элементам (не обязательно Dojo виджетов) слушателю для " нажмите»события, скажем

<input onclick="onInputClick(event);" data-dojo-type="dojox/mobile/TextBox"> 

или

<input onclick="onInputClick(event);"> 

и определим функцию следующим образом:

onInputClick = function(e){ 
    e.target.focus(); 
}; 

Объяснение и некоторые замечания:

  • Когда высота устройства высота не присутствует в мета-тег, нет «фокус» событие при нажатии поля ввода (добавление устройства высоты устанавливает, что, но создает побочный эффект в альбомной ориентации). Иными словами, при перемещении из поля ввода в другое с использованием предыдущих/следующих стрелок в верхней части клавиатуры происходит событие фокусировки.
  • Событие фокусировки используется мобильным прокручиваемым контейнером Dojo для настройки прокрутки таким образом, чтобы поле отображалось после показа клавиатуры. Поскольку при записи в поле ввода нет фокуса, эта настройка не выполняется ...
  • Обратите внимание, что в документации по Cordova 3.1 указано: «Проблемы с iOS 7: удалить значения» width = ширина устройства = высота устройства = высота устройства «из вашего мета-тега« атрибут видового экрана »(http://cordova.apache.org/docs/en/3.1.0/guide_platforms_ios_upgrading.md.html#Upgrading%20iOS). Из этого кажется, что не использовать высоту: высота устройства в любом случае рекомендована Cordova. Однако https://issues.apache.org/jira/browse/CB-4862, по-видимому, подразумевает, что высота: высота устройства должна быть установлена ​​для IOS 7 ... Определенно, изменения, вносимые прошивкой 7 по-прежнему производит много боли.
  • Для Dojo Mobile, выпуск отслеживается в https://bugs.dojotoolkit.org/ticket/17505.
+0

Я воспроизвел проблему в Cordova 3.1 с фокусом ввода на iOS 7 без Dojo, и я отправил https://issues.apache.org/jira/browse/CB-5115. –

+0

Привет Адриан. Спасибо за ссылки и благодарю вас за открытие отчета об ошибке! К сожалению, даже обходной путь, который вы опубликовали, не работает с Worklight. Я тестировал этот код и в альбомной ориентации клавиатура появляется и сразу исчезает, когда я нажимаю на вход. Вход получает фокус, но как только клавиатура начинает подниматься, фокус передается телу. WL не использует Cordova 3.1, поэтому, возможно, обходной путь, который вы предлагаете, не будет работать. –

+0

Хорошо, я буду тестировать, используя вашу версию WL и Cordova.Чтобы быть уверенным, вы получаете это неправильное поведение, продолжая использовать код, который вы отправили в своем первоначальном вопросе, не так ли? Кроме того, есть ли что-то важное в KeyboardTest.js, что ваш код импортирует? –

Смежные вопросы