가상 키보드가 활성화 된 경우 화면 스타일링

가상 키보드가 활성화 된 경우 화면 스타일링

---

이상적으로는 전체 인터페이스가 ios (itouch / ipad) 또는 가상 키보드가있는 Android에 해당 하는 사용자 지정 스타일 을 갖기를 원합니다 . 자세한 내용은 아래를 참조하십시오.

키보드가 "존재"할 때 활성화되는 사용자 지정 CSS 해킹 규칙 설정도 허용 가능한 솔루션입니다.

웹 사이트 (HTML / JavaScript / CSS)에서 Android와 iOS를 모두 대상으로합니다. 또한 내부 레이아웃은 "유동"입니다.

편집 : 이것은 더 많은 디자인이었고 텍스트였습니다. 따라서 변화는 방향을 잃지 않습니다. 가장 낮은 수준에서는 가상 키가 있거나 없는 디자인 변경을 원합니다 (아마도 배경 변경 일 수도 있음).

이것이 좋은 디자인 아이디어인지 나쁜 디자인 아이디어인지에 대한 질문은 논쟁의 여지가 있습니다. 그러나 나는 질문과 관련이 없다고 생각합니다. 이러한 익스플로잇은 텍스트 (게임 또는 대화 형 미디어와 같은)보다 더 많이 사용할 수 있습니다.

따라서 현상금 : 내가 작업중인 프로젝트에 대한 답변이 더 이상 필요하지 않음에도 불구하고 (대체 설계가 사용되었습니다). 나는 여전히이 질문에 대한 답변을 받으면 도움이 될 것이라고 믿습니다.

기본 동작

                       +--------+ 
                       |        |
+------------+       +-+-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으로 기본 앱을 빌드하는 경우 상황이 달라집니다. keybord 상태를 확인하는 직접적인 API 훅이 없기 때문에 Phonegap에 자체 플러그인 을 작성해야합니다 .

Android에서는 네이티브 코드 [ 여기에서 확인 ]를 사용하여 키보드의 표시 / 숨기기 상태를 확인할 수 있습니다 . HTML에서 이러한 이벤트를 가져 오려면 Phonegap 플러그인을 작성해야합니다.

[Phonegap이 그 예입니다. 대부분의 html to native 프레임 워크는 네이티브 코드와 연결하기에 이런 종류의 쾌적함을 가지고 있다고 생각합니다.]

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> 

---

Have JavaScript apply a class to the body when an input element has focus.

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

And then use @media queries to determine if mobile view:

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

The combination will let you stylize the page when the keyboard is up, on mobile. Thank you.

---

I have the exact problem. Here's my solution so far, I'd appreciate if someone could test on Apple: http://jsfiddle.net/marcchehab/f2ytsu8z/show (to see the source code and all: http://jsfiddle.net/marcchehab/f2ytsu8z)

I detect if they keyboard is out in the following way: Upon loading I calculate a variable "sumedges", which is $(window).width() + $(window).height(). Then, in the event of $(window).resize() I compare: If the sum $(window).width() + $(window).height() has become smaller than "sumedges", it means the keyboard is out. This works here on Chrome on Android. You can easily tweak this code to do whatever you like.

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

Using jQuery, I found no way to force a smooth transition when you click on an input and the keyboard pops out. But it maybe possible to trick the system: In the fiddle, I set up a fake input (blue). When you click on it, the real input appears just below my display (yellow) and is selected. This way it all looks smooth here on Chrome on Android. Again, I'd appreciate if you guys could test.

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

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

참고URL : https://stackoverflow.com/questions/8556933/screen-styling-when-virtual-keyboard-is-active