Как сфокусировать поле в представлении с помощью iscroll и Android WebView

Когда я фокусируюсь в поле формы в нижней части представления iScroll, он не прокручивает / не сфокусирует поле над программной клавиатурой. Есть идеи? Спасибо!

полеполе

Это проект Android. https://dl.dropboxusercontent.com/u/75818136/webkitdemo.zip

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <title>iScroll demo: simple</title> <style type="text/css" media="all"> body,ul,li { padding:0; margin:0; border:0; } body { font-size:12px; -webkit-user-select:none; -webkit-text-size-adjust:none; font-family:helvetica; } #header { position:absolute; z-index:2; top:0; left:0; width:100%; height:45px; line-height:45px; background-color:#d51875; background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fe96c9), color-stop(0.05, #d51875), color-stop(1, #7b0a2e)); background-image:-moz-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e); background-image:-o-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e); padding:0; color:#eee; font-size:20px; text-align:center; } #header a { color:#f3f3f3; text-decoration:none; font-weight:bold; text-shadow:0 -1px 0 rgba(0,0,0,0.5); } #footer { position:absolute; z-index:2; bottom:0; left:0; width:100%; height:48px; background-color:#222; background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222)); background-image:-moz-linear-gradient(top, #999, #666 2%, #222); background-image:-o-linear-gradient(top, #999, #666 2%, #222); padding:0; border-top:1px solid #444; } #wrapper { position:absolute; z-index:1; top:45px; bottom:48px; left:0; width:100%; background:#aaa; overflow:auto; } #scroller { position:absolute; z-index:1; /* -webkit-touch-callout:none;*/ -webkit-tap-highlight-color:rgba(0,0,0,0); width:100%; padding:0; } #scroller ul { list-style:none; padding:0; margin:0; width:100%; text-align:left; } #scroller li { padding:0 10px; height:40px; line-height:40px; border-bottom:1px solid #ccc; border-top:1px solid #fff; background-color:#fafafa; font-size:14px; } </style> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="iscroll.js"></script> </head> <body> <div id="header"><a href="http://cubiq.org/iscroll">iScroll</a></div> <div id="wrapper"> <div id="scroller"> <ul id="thelist"> <li>Pretty row 1</li> <li>Pretty row 2</li> <li>Pretty row 3</li> <li>Pretty row 4</li> <li>Pretty row 5</li> <li>Pretty row 6</li> <li>Pretty row 7</li> <li>Pretty row 8</li> <li>Pretty row 9</li> <li>Pretty row 10</li> <li>Pretty row 11</li> <li>Pretty row 12</li> <li>Pretty row 13</li> <li>Pretty row 14</li> <li>Pretty row 15</li> <li>Pretty row 16</li> <li>Pretty row 17</li> <li>Pretty row 18</li> <li>Pretty row 19</li> <li>Pretty row 20</li> <li>Pretty row 21</li> <li>Pretty row 22</li> <li>Pretty row 23</li> <li>Pretty row 24</li> <li>Pretty row 25</li> <li>Pretty row 26</li> <li>Pretty row 27</li> <li>Pretty row 28</li> <li>Pretty row 29</li> <li>Pretty row 30</li> <li>Pretty row 31</li> <li>Pretty row 32</li> <li>Pretty row 33</li> <li>Pretty row 34</li> <li>Pretty row 35</li> <li>Pretty row 36</li> <li>Pretty row 37</li> <li>Pretty row 38</li> <li>Pretty row 39</li> <li><form><input type="text" value="hey" spellcheck="false"></form></li> </ul> </div> </div> <div id="footer"></div> <script> var myScroll; function loaded() { myScroll = new iScroll('wrapper'); } document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false); window.addEventListener("resize", function() { console.error("=------======-=-=-=="); }, false); </script> </body> </html> 

Solutions Collecting From Web of "Как сфокусировать поле в представлении с помощью iscroll и Android WebView"

Наконец, я нашел решение моего вопроса. Кстати, это решение будет в моей книге, которая будет опубликована в ближайшее время. Я просто хотел поделиться этим с сообществом разработчиков.

Прежде всего, iscroll должен справиться с этим вопросом для нас, но почему-то это не так.

Кроме того, я думаю, что в Android API есть ошибка. Когда я использую полноэкранный режим (в манифесте или программно), событие «изменить размер» не запускается в WebView. Не знаю, почему. Я уже сообщал об этой ошибке команде Android. Если вы знаете, почему это происходит, сообщите нам об этом. Благодарю.

 android:theme="@android:style/Theme.NoTitleBar.Fullscreen" // or getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN); 

Вот решение:

Я удалил полноэкранный режим. Вместо этого я использовал res/values/style.xml , requestWindowFeature(android.view.Window.FEATURE_NO_TITLE); android:theme="@style/Theme" в приложении, чтобы удалить родной заголовок приложения. Это решение также работает, когда происходит ориентация.

Затем, используя событие «focus», я зафиксировал, какой элемент имеет фокус.

 var $elm; $('input, textarea').bind('focus', function(e) { console.error("onFocus"); $elm = $(this); }); 

Затем, используя событие «изменить размер», я обновил объект iscroll, а затем перейдя в $ elm.

 $(window).bind('resize', function() { console.error("onResize"); if (myScroll !== undefined) { setTimeout(function() { myScroll.refresh(); myScroll.scrollToElement($elm[0], 200); }, 100); } }); 

Это ответ на мой вопрос, WebKitDemo2.zip

Я не уверен, что это хороший ответ на ваш вопрос. Я уже сталкивался с такой же проблемой с soft keyboard и iscroll в POS-устройстве. Чтобы решить эту проблему, я выполнил работу STUPID .

Шаги, которые я сделал.

Предположим, вы подключили iScroll, как это

IScrollObj = новый iScroll ('ID');

  1. Я добавляю пустой контейнер div внутри контейнера прокрутки последним, если у меня есть вход.
  2. Когда элемент ввода получает фокус, но до того, как клавиатура всплывает, я вычисляю положение поля ввода ( pi ) и высоты ввода ( hi )
  3. Я получаю высоту экрана ( hs ), высоту клавиатуры ( hk )
  4. Используя hs , hk , hi и pi я вычислил высоту для пустой обертки div и назначен ей.
  5. Чтобы избежать разочарования, я использовал iScrollObj.refresh() вызова iScrollObj.refresh() . (Потому что я динамически назначал высоту для обертки div, iScroll когда-то отвечал правильно для динамических настроек, но когда-то это терпит неудачу)
  6. Затем я использовал iScrollObj.scrollTo(x, y, time) обратного вызова iScrollObj.scrollTo(x, y, time) iScroll для перемещения ввода вверх
  7. Когда я скрываю клавиатуру, я устанавливаю пустую высоту обертки div в 0
  8. Теперь вам нужно выполнить сброс. iScrollObj.refresh() и iScrollObj.scrollTo(x, y, time)

Тем не менее вы можете использовать iScrollObj.scrollToElement(element, time) но я думаю, что это больше работает. Поскольку element должен быть CSS selector элемента, в котором iScroll автоматически прокручивает этот элемент, в котором он отображает этот элемент в верхней позиции в представлении. Это означает, что на экране, который вы добавили, будет сказано, если вы используете CSS selector Pretty row 34 то он отобразится из Pretty row 34 вниз.

Пожалуйста, обратите внимание

Soft keyboard которую я использую, разработана мной (это плагин jQuery), поэтому я смог реализовать все необходимые функции обратного вызова. iScroll уже предоставляет множество функций обратного вызова.

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

Я не знаю ограничений, которые у вас есть. Просто поделился работой STUPID, что я сделал.

Простите меня, если это не подходит вам.

Благодарю.