it-swarm-pt.tech

estilo da tela quando o teclado virtual está ativo

Idealmente, eu gostaria que toda a interface tivesse um estilo personalizado que é visto no ios (iTouch/ipad) ou Android equivalente ao teclado virtual presente. Veja abaixo para mais detalhes.

Um conjunto personalizado de regras de hackers CSS para estar ativo, quando o teclado está "presente", também é uma solução aceitável.

Segmenta androids e ios, em um site (HTML/JavaScript/CSS) Observe também que o layout interno é: "fluid".

Edit: Isso foi mais design, depois texto; Portanto, as mudanças não são desorientadoras. No nível mais baixo, desejo apenas uma alteração de design com e sem as chaves virtuais (Talvez apenas uma alteração de segundo plano).

A pergunta sobre a qual, essa é uma idéia boa ou ruim de design, é discutível. No entanto, eu me sinto irrelevante para a pergunta. Pois essa exploração pode ter mais uso que o texto (como jogos ou mídia interativa) .

Daí a recompensa: Apesar de não precisar mais da resposta para o projeto em que estava trabalhando (um design alternativo foi usado). Ainda acredito que essa pergunta possa se beneficiar por ser respondida.

comportamento padrão

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

Comportamento Desejado

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

Não tenho certeza, este é o efeito desejado? verifique este link

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

Atualização

(1) Supondo que seja um site e executando no navegador do dispositivo. Em seguida, podemos verificar a presença do teclado virtual, verificando o tamanho da tela.

Verifique o navegador do dispositivo - http://jsfiddle.net/UHdCw/8/show/

código: - http://jsfiddle.net/UHdCw/8/

(2) Se você estiver criando um aplicativo nativo com HTML5 e Phonegap, as coisas serão diferentes. Como não existe um gancho direto da API para verificar o status do teclado, precisamos escrever nosso próprio plugin no Phonegap.

No Android, você pode verificar o status de mostrar/ocultar do teclado usando o código nativo [ verifique aqui ]. e precisa escrever o plugin Phonegap para obter esses eventos em nosso HTML.

[Phonegap é um exemplo. Eu acho que a maior parte do html para estruturas nativas tem esse tipo de felicidade para se conectar ao código nativo]

Atualização do iOS

Como você disse, não há alterações na altura/posição quando o teclado está presente. Podemos fazer uma coisa: quando a entrada obtém o foco, podemos adicionar uma classe de redução e reduzir o tamanho do elemento. Verifique o link a seguir.

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

21
Praveen Vijayan

Eu encontrei o mesmo problema, isso funciona para mim:

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

O JavaScript deve aplicar uma classe ao body quando um elemento de entrada tiver focus.

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

E use as consultas @media para determinar se a visualização móvel:

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

A combinação permitirá que você estilize a página quando o teclado estiver no celular. Obrigado.

11
redolent

Eu tenho o problema exato. Aqui está minha solução até agora, eu apreciaria se alguém pudesse testar na Apple: http://jsfiddle.net/marcchehab/f2ytsu8z/show (para ver o código fonte e tudo: http://jsfiddle.net/marcchehab/f2ytsu8z )

Eu detecto se o teclado está fora da seguinte maneira: Ao carregar, calculo uma variável "sumedges", que é $ (window) .width () + $ (janela) .height (). Então, no caso de $ (window) .resize () eu comparo: Se a soma $ (window) .width () + $ (window) .height () se tornou menor que "sumedges", significa que o teclado está Fora. Isso funciona aqui em Chrome no Android. Você pode facilmente ajustar esse código para fazer o que quiser.

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

Usando o jQuery, não encontrei nenhuma maneira de forçar uma transição suave quando você clica em uma entrada e o teclado aparece. Mas talvez seja possível enganar o sistema: No violino, configurei uma entrada falsa (azul). Quando você clica nela, a entrada real aparece logo abaixo da minha tela (amarela) e é selecionada. Dessa forma, tudo fica bem aqui em Chrome no Android. Mais uma vez, eu apreciaria se vocês pudessem testar.

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

$("#realinput input").blur(function(){
    $("#realinput").hide();
});
0
Marc Chéhab