стилістика екрана, коли активна віртуальна клавіатура

В ідеалі, я хотів би, щоб весь інтерфейс мав власний стиль, який видно на ios (itouch / ipad) або еквіваленті android при наявності віртуальної клавіатури. Докладніше див. Нижче.

Прийнятне встановлення правил злому CSS для активності, коли клавіатура присутня, також є прийнятним рішенням.

Орієнтований як на андроїди, так і на ios, на веб-сайті (HTML / JavaScript / CSS) Також зверніть увагу, що макет всередині: "fluid".

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

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

Звідси щедрість: Незважаючи на те, що мені більше не потрібна відповідь на проект, над яким я працював (використано альтернативний дизайн). Я все ще вважаю, що це питання може отримати користь від відповіді.

Поведінка за замовчуванням

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

Бажана поведінка

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

Я не впевнений, це бажаний ефект ?. перевірте це посилання

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.

[Приклад - Фонегап. Я думаю, що більшість html для нативних фреймворків мають такий тип привітання, щоб підключити його до власного коду]

Оновлення iOS

Як ви вже сказали, при наявності клавіатури не змінюється висота / положення. Ми можемо зробити одне, коли вхід фокусується на фокусі, ми можемо додати клас усадки та зменшити розміри елементів. Перевірте наступне посилання.

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

Я зіткнувся з тією ж проблемою, це працює для мене:

<!-- 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> 

Нехай 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; }
}

Ця комбінація дозволить стилізувати сторінку, коли клавіатура піднята, на мобільному. Дякую.

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

Я виявляю, чи клавіатура вимкнена наступним чином: При завантаженні я обчислюю змінну "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();
});

Я використовую простий CSS-медіа-запит для переміщення активних входів у верхню частину екрана на мобільних телефонах, коли клавіатура відкрита. Щось на зразок цього прикладу без голови:

/* MOBILE KEYBOARD IS OPEN */
@media only screen and (max-width: 430px) and (max-height:400px){
    input:focus{
        position: fixed;
        top:50px;
    }
}

Ви повинні налаштувати висоту вікна перегляду самостійно, iOS та Android цього не роблять.

Але є lib, щоб це виправити:

https://github.com/adamjgrant/a-viewport-that-works