Я работаю над веб-базовым мобильным (HTML) приложением. Есть ли способ обнаруживать событие клавиатуры, например, когда клавиатура видна, а клавиатура скрыта, основываясь на том, что я могу контролировать другую компоновку экрана. Я попытался сосредоточиться, размыть, событие изменения размера браузера, но моя проблема не устраняет 100%, поэтому я я ищу только событие клавиатуры, на самом деле я хочу скрыть нижний колонтитул над клавиатурой, когда клавиатура видна поскольку он (нижний колонтитул) появляется над клавиатурой, поэтому я пытаюсь установить нижний колонтитул положение, когда клавиатура видна, и положение нижнего колонтитула как исправлено при смене клавиатуры. я пытался, как показано ниже, но это не может быть 100% -ое разрешение
моя проблема. $ (document).ready(function() {
$("input").focus(function() {
$(".copyright_link").css("position","relative");
});
$("input").blur(function() {
$(".copyright_link").css("position","fixed");
});
});
Кто-нибудь может помочь мне решить проблему нижнего колонтитула или сообщить мне, если это событие клавиатуры в jquery
Вы можете использовать событие resize, чтобы получить, появляется ли клавиатура или нет
$(document).ready(function(){
var _originalSize = $(window).width() + $(window).height()
$(window).resize(function(){
if($(window).width() + $(window).height() != _originalSize){
console.log("keyboard show up");
$(".copyright_link").css("position","relative");
}else{
console.log("keyboard closed");
$(".copyright_link").css("position","fixed");
}
});
});
if($(document.activeElement).attr('type') == "text"){
console.log("Keyboard is visible");
}else{
console.log("Keyboard is not visible");
}
Использование jQuery:
var lastWindowWidth = $(window).width(),
lastWindowHeight = $(window).height();
$(window).resize(function() {
var newWindowWidth = $(window).width(),
newWindowHeight = $(window).height();
if( newWindowHeight > lastWindowHeight && newWindowWidth == lastWindowWidth ) {
// Keyboard closed
// ...
}
lastWindowWidth = newWindowWidth;
lastWindowHeight = newWindowHeight;
});
Обратите внимание, что событие изменения размера окна (и, таким образом, блок комментариев с закрытой клавиатурой) может вызываться несколько раз, когда клавиатура закрывается. Изменить в соответствии с вашими потребностями.
Привет, вот одно из решений, которое работало для меня, чтобы проверить, активна ли клавиатура в мобильных устройствах.
В приведенном ниже коде "# Email" - это идентификатор поля ввода, которое я использую.
$(window).resize(function () { //checking for window resize event
if($(window).width() < 414){ //checking for window width
if($("#Email").is(":focus")){
$('.content').css({'margin-top': -15 + 'px'});
$('.footer').css({'margin-bottom': -100 + 'px'});
}
}});
Самое эффективное решение bullet prof, которое работает в Chrome/Safari и т.д., и на Android и iOS по состоянию на 20 ноября 2017 года будет определять изменение высоты div, у которого есть единицы высоты vh (область просмотра высота)
Затем при любом изменении размытия/фокуса ввода /textarea проверьте, имеет ли теперь этот div высоту на 30% меньше (в пикселях), чем раньше это событие размытия/фокусировки.
Смотрите код здесь: Обнаружение виртуальной клавиатуры и аппаратной клавиатуры (его явно не разрешено копировать код вставки). Обнаружение виртуальной клавиатуры и аппаратной клавиатуры.