Jquery mobile 1.4 на iOS: фиксированные элементы внизу страницы скрывают вводимый текст в фокусе

Привет, я создаю приложение Cordova 3 с JQuery Mobile 1.4.

Safari и Chrome на моем Mac не имеют проблем со следующим, но когда я развертываю на реальном устройстве или симуляторе iOS и хочу ввести поля, я получаю нижние фиксированные элементы страницы, перемещающиеся вверх и перекрывающие элементы ввода. Курсор мигает в правильном месте, где находится поле ввода, но ползунок футера его скрывает.

Для упрощения моя страница выглядит так:

[верхний колонтитул исправлен] div с входным текстом div с входным текстом div с входным текстом [нижний колонтитул исправлен]

один из экземпляров входного текста

<input data-role="none" class="inputCalc gray_br" type="text" id="grams4" value="37"><div class="macro_g">grams</div>

ползунок внизу

<div id="cal_slider" style="position:fixed; bottom:0px; left:0px; height:57px; width:100%; background-color:#E2E2E2;">
<form style="padding-top:6px" class="full-width-slider"><label for="slider-12" class="ui-hidden-accessible">Slider:</label> <input type="range" data-highlight="true" name="slider-12" id="slider-12" min="0" max="100" value="50"></form>
</div>

Jquery, чтобы показать события скрытия фокуса и размытия

$(document).on('focus', 'input , text', function(e){

    // I have try with --> $("#grams4").focus( function () {... // but it's the same

    console.log("on focus fired");

    $("#cal_slider").hide();

});


$(document).on('blur', 'input, text', function(e){

    console.log("on blur fired");

        $("#cal_slider").show();

});

Поэтому я пытался с помощью событий focus() и blur() переключать (показывать и скрывать) ползунок. Он отлично работает в Chrome и Safari.

Но на реальном устройстве (iPhone 5 iOS7), когда я касаюсь текстового поля ввода, цикл работает, как и ожидалось, только в первый раз:

(1) я получаю журнал фокуса, нижний колонтитул скрыт, (2) появляется клавиатура и (3) я могу ввести вводимый текст.

Затем (4), когда я нажимаю ГОТОВО, клавиатура скрывается, и все в порядке. (5) Я получаю событие размытия в консоли, и снова отображается нижний колонтитул с ползунком. Идеально.

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

Как я уже говорил выше, в Chrome Safary работает отлично.

Любые другие идеи, как определить включение/выключение клавиатуры, возможно, без обработчиков событий?


focus blur jquery-mobile ios7 cordova-3
person sasha    schedule 16.01.2014    source источник
comment
попробуйте это решение здесь jsfiddle.net/Palestinian/5j8RL, оно работает на iPhone 5. Когда вы установите bottom: 0px вы на самом деле прячете ползунок под нижним колонтитулом.   -  person Omar    schedule 16.01.2014
comment
Хм, Омар, во-первых, спасибо за пример кода. Проект основан на многостраничности на одном единственном html. У меня есть глобальный нижний колонтитул, который я должен скрывать, когда попадаю на эту страницу, что усложняет ситуацию, но я собираюсь применить вашу концепцию. Звучит неплохо.   -  person sasha    schedule 16.01.2014
comment
вы скрываете нижний колонтитул, используя data-tap-toggle="true"?   -  person Omar    schedule 16.01.2014
comment
скрытие нижнего колонтитула с помощью $([data-role=footer]).hide(); на «создание страницы», «страница 4». Во всяком случае, я адаптировал ваш метод, но я получаю тот же результат. Я думаю, что проблема связана с тем фактом, что я работаю на странице на самом деле без глобального нижнего колонтитула и заголовка JQM, которые я показываю на других страницах. На этой странице4 это только основной пользовательский интерфейс. Мой нижний колонтитул - это не роль = нижний колонтитул, а фиксированный div с ползунком в нем. Страница представляет собой инструмент калькулятора, полностью напичканный элементами. Нужно пространство. Если я загружу все это в iOS-симулятор Safari, проблем не будет. Но однажды на устройстве... перекрываются.   -  person sasha    schedule 16.01.2014
comment
Вы можете опубликовать здесь свою разметку для создания скрипки?   -  person Omar    schedule 16.01.2014
comment
Я попробую некоторые другие варианты, а затем поиграю, хотя для воспроизведения всего процесса требуется много кода. НО !!! поля ввода текста   -  person sasha    schedule 16.01.2014
comment
НАШЛИ РЕШЕНИЕ ЗДЕСЬ!!! Теперь мир другой. Спасибо OMAR за поддержку и идеи. Итак... поместите следующий код после закрывающего тега ‹/body› многостраничного документа. ‹script type=text/javascript› document.write( '‹style›#footer{visibility:hidden}@media(min-height:' + ($(window).height() - 10) + 'px){# нижний колонтитул{видимость:видимый}}‹/стиль›'); ‹/script› Спасибо Ричарду Кеннарду stackoverflow.com/a/20092755/3166158   -  person sasha    schedule 16.01.2014

Ответы (1)


arrow_upward
0
arrow_downward

Это работает:

поместите следующий код после закрывающего тега многостраничного.

</body>
<script type="text/javascript">
document.write( '<style>#footer{visibility:hidden}@media(min-height:' + ($( window ).height() - 10) + 'px){#footer{visibility:visible}}</style>' );
</script>
</html>

Благодаря Ричарду Кеннарду stackoverflow.com/a/20092755/3166158

person sasha    schedule 04.04.2014