Bàn phím Hiển thị vị trí của các yếu tố sai lầm '

Question

Tôi có trò chơi yêu cầu đầu vào bàn phím cảm ứng của thiết bị di động. Màn hình của nó có vấn đề, bất cứ khi nào bàn phím hiển thị ở tiêu điểm nhập văn bản, tất cả các yếu tố của tôi mà vị trí: tuyệt đối bị tất cả điều sai lầm.

Có plugin nào cho phép bàn phím di động luôn hiển thị để tôi định vị lại tất cả các phần tử HOẶC tôi cần thay đổi css để tạo các phần tử sao cho không lộn xộn khi bàn phím xuất hiện?

Tôi nên triển khai tính năng này như thế nào?

Đây là một trong những yếu tố css:

#mixer{ 
    position: absolute; 
    bottom:29%; 
    left:25%; 
    width: 234px; 
    height: 210px; 
    background: transparent url(img/mixer.png) 0 50px no-repeat; 
} 

Lưu ý: Tôi đang sử dụng Jquery di động, PhoneGap trên môi trường Android.

Answer 1

Trong AndroidManifest.xml của bạn, thêm dòng sau dưới hoạt động với bàn phím:

android:windowSoftInputMode="adjustNothing"

Answer 2

Tôi nghĩ rằng vấn đề của bạn là với thuộc tính Bottom được đặt thành "trong trường hợp này" là 29%. bạn có thể muốn đặt nó là tuyệt đối với TOP thay vì dưới cùng.

Bằng cách đó, nó sẽ được đẩy từ trên xuống thay vì nhìn vào phía dưới, trong trường hợp này là bàn phím.

để bạn muốn ở mức 29% dưới cùng, 100 - 29 = 71 Xóa 29% dưới cùng và thay đổi thành 71% hàng đầu.

Answer 3

Nghe các sự kiện Softkeyboard hiển thị/ẩn. Câu trả lời này trên SO có một mã ví dụ:

Softkeyboard event Listener in Android

Khi Softkeyboard ở trạng thái hiển thị, sử dụng một 'bàn phím-được-cho thấy' CSS riêng cho trò chơi của bạn. Khi Softkeyboard bị ẩn, hãy hoàn nguyên về CSS 'bàn phím đã đóng' trước đó.

này trước Q & A trên SO giao dịch với một tình huống tương tự:

phonegap application layout issue with soft keyboard in Android 2.3.6 and in iPhone 5.0

Answer 4

Tôi đã sử dụng ứng dụng này trên iPad chứ không phải android, nhưng có vẻ như vấn đề tương tự.

jQuery di động đặt chiều cao trang bằng javascript khi kích thước thay đổi - mọi thứ được căn chỉnh ở cuối trang được chuyển lên trong html, đồng thời khi hệ điều hành cuộn toàn bộ chế độ xem để giữ vị trí trước của đầu vào có thể nhìn thấy.

Tôi đã khắc phục vấn đề với một số css khiến trình duyệt bỏ qua cài đặt độ cao. Nó cũng làm cho những thay đổi định hướng mượt mà hơn rất nhiều.

.ui-mobile, .ui-mobile .ui-page { 
    min-height: 100% !important; 
    } 

Answer 5

Kiểm tra những links-

http://android-developers.blogspot.in/2009/04/updating-applications-for-on-screen.html

http://developer.android.com/reference/android/R.attr.html#windowSoftInputMode

Cố gắng thêm trong android manifest: windowSoftInputMode = "adjustResize" tham số để thẻ hoạt động của bạn.

Hy vọng điều đó sẽ hữu ích.