Предотвращение перемещения пользовательского интерфейса при появлении клавиатуры

Question

Я работаю над небольшим приложением, которое использует Sencha Touch 2 для пользовательского интерфейса. Прямо сейчас я запускаю его в Safari на своем iPad и iPhone.

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

Это не выглядит очень естественным, так как верхняя панель инструментов больше не виден.

Вот два скриншота, которые демонстрируют проблему. На втором снимке экрана вы видите эффект, когда клавиатура видна.

Есть ли способ предотвратить это поведение, и у Safari изменить размер вместо пользовательского интерфейса?

---

Answer 1

Вам нужно будет вызвать метод blur() на textfield

// Assuming the id of textfield - "textFieldId" 
Ext.getCmp('textFieldId').blur(); 

Попытки forcefully размытие ввода фокус для поля.

Answer 2

Если вы используете html в элементах Sencha, необходимо удалить что-то тег html. Или вы можете поместить тег
в исходный html-код. Я надеюсь помочь вам. :)

Answer 3

К сожалению, Apple хочет, чтобы это поведение, но someone предложил немного хак с помощью window.scrollTo():

listeners: { 
    focus: function() { 
     window.scrollTo(0,0); 
    } 
} 

Answer 4

Я нашел решение, которое работает для меня. Вы перемещаете верхнюю панель в контейнер.

xtype: 'container', 
       docked: 'top', 
       height: '100%', 
       html: '', 
       itemId: 'MyContainer', 
       width: '100%', 
       items: [ 
        { 
         xtype: 'titlebar', 
         docked: 'top', 
         itemId: 'topBar', 
         title: 'Obec Webchat', 
         layout: { 
          type: 'hbox', 
          align: 'start' 
         }, 
         items: [ 
          { 
           xtype: 'button', 
           action: 'back', 
           id: 'BackButton', 
           itemId: 'BackButton', 
           margin: '5 70% 5 15', 
           ui: 'back', 
           text: 'Home' 
          } 
         ] 
        }, 
        { 
         xtype: 'container', 
         docked: 'bottom', 
         height: '95%', 
         html: '<iframe src="http://webim.obec.local/" width="100%" height="100%" scrolling="yes"></iframe>', 
         itemId: 'MyContainer1', 
         width: '100%' 
        } 
       ] 
      } 

Надеюсь, это поможет.

Answer 5

Ввод этого кода в функции запуска в app.js работал для меня:

if (Ext.os.is.Android) { 
     Ext.Viewport.on('painted', function() { 
      Ext.Viewport.setHeight(window.innerHeight); 
     }); 
    } 

    if (Ext.os.is.iOS) { 

     Ext.Viewport.on('painted', function() { 
      Ext.Viewport.setHeight(window.innerHeight); 
     }); 
    }