jquery/js/html5 nội dung trang thay đổi khi bàn phím là có thể nhìn thấy trên các thiết bị di động

Question

thể trùng lặp:
iPad Web App: Detect Virtual Keyboard Using JavaScript in Safari?

Tôi đang xây dựng một phiên bản di động cho một trang web, và tôi m quan tâm nếu tôi có thể tạo bằng jquery/js/html5 hoặc bất kỳ công nghệ nào khác có cùng hiệu ứng màn hình chia nhỏ có thể được thực hiện trên ứng dụng dành cho thiết bị di động khi bàn phím ảo hiển thị.

Ví dụ: nếu người dùng nhập trang web của tôi và nhấp vào trường văn bản nhập, bàn phím ảo được hiển thị và trình duyệt sẽ tự động phóng to đến khu vực có trường nhập văn bản.

Điều tôi muốn là có thể thay đổi nội dung trang khi bàn phím ảo hiển thị dựa trên độ phân giải mới (chiều cao màn hình - chiều cao bàn phím), bằng cách di chuyển trường nhập văn bản ở đầu màn hình, tiếp theo một số mẹo tùy thuộc vào những gì người dùng nhập vào trường văn bản.

Dưới đây là một số phác thảo để xem những gì tôi đang nói về:

Đây là quan điểm trang mà không cần bàn phím, kết quả dựa trên tìm kiếm:

trang với bàn phím chân dung, logo biến mất, đầu vào văn bản chuyển lên trên cùng và tối đa 4 mục được hiển thị

trang với bàn phím nằm ngang, biểu tượng biến mất, thext đầu vào sang phía trên và được mở rộng, chỉ có 2 mặt hàng được cho thấy

là bàn phím được giấu, trang nên đến làm phiền 1.

Hy vọng điều này sẽ giúp.

Answer 1

Tôi đã thử một giải pháp đầu tiên cho vấn đề của bạn bằng cách bắt sự kiện thay đổi kích thước Với nó, bạn có thể biết được phương hướng và gest là bàn phím có thể nhìn thấy

CẬP NHẬT: thêm iOS hỗ trợ Safari di động với LKM solution

var is_keyboard = false; 
var is_landscape = false; 
var initial_screen_size = window.innerHeight; 

/* Android */ 
window.addEventListener("resize", function() { 
    is_keyboard = (window.innerHeight < initial_screen_size); 
    is_landscape = (screen.height < screen.width); 

    updateViews(); 
}, false); 

/* iOS */ 
$("input").bind("focus blur",function() { 
    $(window).scrollTop(10); 
    is_keyboard = $(window).scrollTop() > 0; 
    $(window).scrollTop(0); 
    updateViews(); 
}); 

Bây giờ bạn có thể hiển thị và ẩn các biểu tượng và một số mục hàng

function updateViews() { 
    $("li").hide(); 
    if (is_keyboard) { 
     $("#logo").hide(); 
     if (is_landscape) { 
      $("li").slice(0, 2).show(); 
     } 
     else { 
      $("li").slice(0, 4).show(); 
     } 
    } 
    else { 
     $("#logo").show(); 
     $("li").show(); 
    } 
} 

Đối với JS dựa trên HTML này

<div id="logo">Logo</div> 
<input type="text"><input type="submit" value="search"> 
<ul> 
    <li>Item</li> 
    <li>Item</li> 
    <li>Item</li> 
    <li>Item</li> 
    <li>Item</li> 
    <li>Item</li> 
    <li>Item</li> 
    <li>Item</li> 
</ul> 

Check-out my example page