Trang web có thể nhận biết bàn phím ảo android

Question

Tôi có web page with jquery terminal và văn bản ẩn (kích hoạt bàn phím ảo Android), tôi có thể nhập ký tự nhưng khi nhập vài lệnh, nội dung bị ẩn sau Bàn phím ảo. Nội dung đầu cuối đang cuộn xuống dưới vì khi tôi nhập một số lệnh khác, đó là cuộn. Khi tôi sử dụng phím số phần cứng trong cuộn điện thoại của tôi là đúng (di chuyển cảm ứng chưa hoạt động).

tôi thêm CSS này

.terminal textarea { top: 0; width:0; margin-left: -8px; pointer-events: none; } 

để prevoius

.terminal .clipboard { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    opacity: 0.01; 
    filter: alpha(opacity = 0.01); 
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.01); 
    width: 2px; 
} 
.cmd > .clipboard { 
    position: fixed; 
} 

và có mã này trong plugin (textarea được sử dụng cho clipboard).

self.click(function() { 
    self.find('textarea').focus(); 
}); 

Và qestion của tôi là thế này: javascript có thể phát hiện lớn như thế nào Bàn phím ảo là gì? Hoặc có thể có cách khác để thay đổi kích thước của trang web để nó chỉ ở phần trực quan (không phải bàn phím)? Hoặc có thể có điều gì đó sai với mã của tôi, nó không được thiết kế để hoạt động trên thiết bị di động. Kích thước bàn phím có luôn là không, ngay cả khi người dùng cài đặt bàn phím khác?

Answer 1

Từ những gì tôi thấy, khi bàn phím ảo bật lên, trang không được thay đổi kích thước (để vừa với vùng xem nhỏ hơn, hiển thị bằng bàn phím ảo bật). Vì vậy, điều này sẽ không cung cấp cho trang của bạn một gợi ý về việc liệu bàn phím có lên hay không. Và tôi không thực sự nghĩ rằng có một cách khác để nhận được thông tin đó.

Bạn có thể thiết lập nơi bạn nhìn vào tác nhân người dùng và nếu nó dành cho điện thoại Android, khi người dùng nhấp vào các yếu tố nhập văn bản khác nhau, bạn sẽ đặt một số phòng ở cuối màn hình cho bàn phím ảo.

Đối với kích thước bàn phím, cổ phiếu Android có thể có kích thước hoặc tỷ lệ chuẩn hoặc tỷ lệ phần trăm, nhưng kết hợp với thực tế là có rất nhiều bản mod của Android ngoài thực tế là có nhiều độ phân giải màn hình và màn hình tỷ lệ ra có dịch không thể có một số cố định cho điều này (như bàn phím là x pixel cao hoặc y phần trăm của màn hình bất động sản). Tuy nhiên, bạn có thể thực hiện một giả định thông thường rằng nó chiếm khoảng một nửa màn hình ở phía dưới. Vì vậy, về cơ bản, sử dụng tác nhân người dùng, độ phân giải màn hình và thực tế là người dùng đã "nhấp" trên trường nhập văn bản, bạn có thể có ý tưởng phong phú về việc bàn phím ảo có được hiển thị hay không và bao nhiêu phòng để dành cho nó.

Answer 2

Nếu bạn đang tìm cách giữ nội dung đầu cuối hiển thị ngay cả khi bàn phím bật lên, bạn không cần biết kích thước bàn phím. Vấn đề nằm ở độ cao "#shell" của bạn. Hãy thử mở Công cụ dành cho nhà phát triển trên Chrome (máy tính để bàn) và thay đổi kích thước cửa sổ của bạn. Bạn sẽ thấy rằng chiều cao của "#shell" div luôn phù hợp với chiều cao của thiết bị chứ không phải chiều cao của khu vực nội dung. Vì vậy, khi bàn phím bật lên, nội dung sẽ nằm ở phía sau bàn phím. Để làm cho nó hoạt động, bạn nên bắt buộc chiều cao "#shell" để vừa với vùng nội dung. Tôi cố gắng để sửa đổi css và nó hoạt động đúng trong giả lập Android của tôi. Ngoài ra, hãy xóa touch-scroll js khỏi trang của bạn, không cần thiết. Bạn có thể nối mã css này vào tệp css của bạn.

#shell { 
    position: fixed !important; 
    top: 0; left: 0; 
    width: 100% !important; height: 100% !important; 
    margin: 0 !important; padding: 0 !important; 
    -webkit-transition: none !important; 
    -webkit-transform: none !important; 
    overflow-y: visible !important; 
} 

#shell .terminal-output, #shell .cmd { 
    margin: 10px; 
} 

Hy vọng trợ giúp này.:)

Answer 3

1 Bạn có thể sử dụng thuộc tính android:windowSoftInputMode trong phần tử <activity> trong số Manifest.xml để chọn trong số các chiến lược thay đổi kích thước khác nhau khi IME bật lên. Chúng bao gồm (không giới hạn):

adjustResize, sẽ thay đổi kích thước chế độ xem nội dung Hoạt động của bạn (và WebView trong đó) để phù hợp với không gian còn lại.

adjustPan, sẽ rời khỏi chế độ xem nội dung để lấp đầy toàn bộ màn hình, một phần bị che khuất bởi Cửa sổ của IME.

Chơi với những thứ này có thể đã cung cấp cho bạn hành vi bạn đang tìm kiếm.

2 Hành vi mặc định của Android khi chuyển đến chế độ xem (Web) khi IME bật lên là nó cố gắng giữ con trỏ hiển thị. Trong trường hợp của bạn, bạn đang đặt con trỏ (hoặc: tập trung) vào một chế độ xem ẩn. Điều này giải thích hành vi kỳ lạ mà bạn đang thấy và tôi nghĩ bạn sẽ làm tốt để thay đổi việc triển khai của mình. Tại sao bạn không sử dụng một vùng văn bản có thể nhìn thấy ở nơi đầu tiên? Văn bản của bạn sẽ phải kết thúc ở đâu đó, đúng không? Và sau đó Android sẽ tự động lấy nét/cuộn.

Giải pháp thay thế: điều bạn có thể thử là định vị chế độ xem ẩn thông minh hơn và xóa nội dung của nó theo thời gian, do đó né tránh vấn đề di chuyển của bạn. Tất nhiên khả năng tồn tại của tùy chọn này phụ thuộc vào trường hợp sử dụng chính xác của bạn.

3 này sẽ là câu trả lời cho các câu hỏi mà bạn đang yêu cầu, nhưng tôi không chắc chắn cách này sẽ giúp bạn (có lẽ vì thiếu kinh nghiệm của tôi với html):

Để có được chiều cao của WebView (đó là Kích thước màn hình - Chiều cao IME) trong javascript của bạn làm như sau:

• Trong tệp kê khai của bạn, thêm thuộc tính android:windowSoftInputMode="adjustResize" vào phần tử của bạn.

• mở rộng bố trí bên ngoài của bạn như thế này:

  public class RelativeLayoutWithLayoutListener extends RelativeLayout { 
  
  public interface LayoutListener { 
      public void onLayout(); 
  } 
  
  private LayoutListener mListener; 
  
  public RelativeLayoutWithLayoutListener(Context context) { 
      super(context); 
  } 
  
  public RelativeLayoutWithLayoutListener(Context context, AttributeSet attrs, int defStyle) { 
      super(context, attrs, defStyle); 
  } 
  
  public RelativeLayoutWithLayoutListener(Context context, AttributeSet attrs) { 
      super(context, attrs); 
  } 
  
  public void setLayoutListener(LayoutListener aListener) { 
      mListener = aListener; 
  } 
  
  @Override 
  protected void onLayout(boolean changed, int l, int t, int r, int b) { 
      super.onLayout(changed, l, t, r, b); 
      if (mListener != null) { 
       mListener.onLayout(); 
      } 
  } 
  } 
  

• Swap ra bố trí cũ của bạn cho mới được tạo ra một tập tin trong Layout.xml của bạn.

• Trong mã hoạt động của bạn, làm một cái gì đó như thế này:

  public class MainActivity extends Activity { 
  
  private RelativeLayoutWithLayoutListener mMainLayout; 
  
  private WebView mWebView; 
  
  @Override 
  protected void onCreate(Bundle savedInstanceState) { 
      super.onCreate(savedInstanceState); 
      setContentView(R.layout.activity_main); 
      mMainLayout = (RelativeLayoutWithLayoutListener)findViewById(R.id.main_layout); 
  
      mMainLayout.setLayoutListener(new LayoutListener() { 
  
       @Override 
       public void onLayout() { 
        mWebView.loadUrl("javascript:setSize(" + mMainLayout.getWidth() + "," + mMainLayout.getHeight() + ")");    
       } 
      }); 
  
      mWebView = (WebView)findViewById(R.id.webview); 
  } 
  } 
  

Tất nhiên trong loadUrl() gọi bạn sẽ phải gọi một phương thức javascript bạn xác định. Tất nhiên bạn cũng có thể vượt qua chiều cao của IME nếu bạn thực hiện một số tính toán trước.