стилизация экрана при активной виртуальной клавиатуре

Question

В идеале, я бы хотел, чтобы весь интерфейс имел пользовательский стиль , который можно увидеть на ios (itouch / ipad) или на андроиде с виртуальной клавиатурой. Подробнее см. Ниже.

Пользовательский набор правил взлома CSS, которые должны быть активными, когда клавиатура «присутствует», также является приемлемым решением.

Ориентация на Android и IOS на веб-сайте (HTML / JavaScript / CSS) Также обратите внимание, что расположение внутри: «жидкость».

Редактировать: Это был скорее дизайн, чем текст; Таким образом, изменения не дезориентируют. На самом низком уровне я просто хочу изменить дизайн с виртуальными клавишами и без них (возможно, просто изменение фона).

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

Отсюда и награда: Несмотря на то, что мне больше не нужен ответ для проекта, над которым я работал (использовался альтернативный дизайн). Я все еще верю, что на этот вопрос может быть полезным ответ.

Поведение по умолчанию

                       +--------+ 
                       |        |
+------------+       +-+-hidden-+-+   <- ~50% hidden
| +--------+ |       | +--------+ |
| |        | |       | |visible | |
| |        | |   \   | |        | |   <- ~50% visible
| |  100%  | |  ==>  | +--------+ |
| |        | |   /   | |virtual | |
| |        | |       | |  keys  | |
| +--------+ |       | +--------+ |
+------------+       +------------+

Желаемое поведение

+------------+       +------------+   
| +--------+ |       | +--------+ |
| |        | |       | |visible | |   <- 100% visible (example styling)
| |        | |   \   | |        | |      Custom Styling
| |  100%  | |  ==>  | +--------+ |
| |        | |   /   | |virtual | |
| |        | |       | |  keys  | |
| +--------+ |       | +--------+ |
+------------+       +------------+

Answer 1

Я не уверен, это желаемый эффект?проверьте эту ссылку

http://jsfiddle.net/UHdCw/3/

Обновление

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

Проверка в браузере устройства - http://jsfiddle.net/UHdCw/8/show/

код: - http://jsfiddle.net/UHdCw/8/

(2).Если вы создаете нативное приложение с HTML5 и Phonegap, все будет иначе.Поскольку прямой проверки API для проверки состояния клавиатуры нет, мы должны написать собственный собственный плагин в Phonegap.

В Android вы можете проверить, показать / скрыть состояние клавиатуры, используя собственный код [ проверьте здесь ].и нужно написать плагин Phonegap для получения этих событий в нашем HTML.

[Phonegap является примером.Я думаю, что большинство html для нативных фреймворков имеют такой вид привязанности к нативному коду]

Обновление iOS

Как вы сказали, изменений в высоте нетположение, когда клавиатура присутствует.Мы можем сделать одну вещь, когда ввод получает фокус, мы можем добавить класс сжатия и уменьшить размеры элемента.Проверьте следующую ссылку.

http://jsfiddle.net/UHdCw/28/show/

Answer 2

Я столкнулся с той же проблемой, у меня это работает:

<!-- Android Viewport height fix-->
<script type="text/javascript">
var isAndroid = navigator.userAgent.toLowerCase().indexOf("android") > -1; //&& ua.indexOf("mobile");
if(isAndroid) {
    document.write('<meta name="viewport" content="width=device-width,height='+window.innerHeight+', initial-scale=1.0">');
}
</script> 

Answer 3

Пусть JavaScript применяет класс к телу , когда элемент ввода имеет focus.

$("input, textarea").focus(function(){  $(document.body).addClass('when-keyboard-showing');     });
$("input, textarea").blur( function(){  $(document.body).removeClass('when-keyboard-showing');  });

А затем используйте @media запросов, чтобы определить, является ли мобильное представление:

@media (max-width:550px) { 
    body.when-keyboard-showing .header { height:0; padding:0; }
}

Комбинация позволит вам стилизовать страницу, когда клавиатура поднята, на мобильном телефоне. Спасибо.

Answer 4

У меня точная проблема. Вот мое решение до сих пор, я был бы признателен, если бы кто-то мог проверить на Apple: http://jsfiddle.net/marcchehab/f2ytsu8z/show (чтобы увидеть исходный код и все: http://jsfiddle.net/marcchehab/f2ytsu8z)

I определяет, нет ли у них клавиатуры следующим образом: При загрузке я вычисляю переменную "sumedges", которая равна $ (window) .width () + $ (window) .height () , Затем, в случае $ (window) .resize () я сравниваю: если сумма $ (window) .width () + $ (window) .height () стала меньше, чем «sumedges», это означает, что клавиатура из. Это работает здесь, на Chrome на Android. Вы можете легко настроить этот код, чтобы делать что угодно.

var sumedges = $(window).width() + $(window).height();
$(window).resize(function(){
    if($(window).width() + $(window).height() < sumedges) {
    $("#display").html("keyboard out");
  } else {
    $("#display").html("keyboard in");
  }
});

Используя jQuery, я не нашел способа форсировать плавный переход, когда вы нажимаете на вход, и клавиатура выскакивает. Но возможно, можно обмануть систему: в скрипке я настроил фальшивый вход (синий). Когда вы нажимаете на него, реальный ввод появляется чуть ниже моего дисплея (желтый) и выбирается. Таким образом, все это выглядит гладко здесь, на Chrome на Android. Опять же, я был бы признателен, если бы вы, ребята, смогли проверить.

$("#fakeinput").click(function(){
    $("#realinput").show().children("input").focus();
  $("html,body").scrollTop($("#display").offset().top);
});

$("#realinput input").blur(function(){
    $("#realinput").hide();
});