La pagina web può essere a conoscenza della tastiera virtuale Android

Question

Ho web page with jquery terminal e area di testo nascosta (che attiva la tastiera virtuale Android), posso digitare caratteri ma quando inserisco pochi comandi il contenuto è nascosto dietro la tastiera virtuale. Il contenuto del terminale sta scorrendo verso il basso perché quando digito un comando in più sta scorrendo. Quando utilizzo il keybaord hardware nel mio telefono, lo scorrimento è corretto (il touch scroll non funziona ancora).

ho aggiunto questo CSS

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

a PREVIOUS

.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; 
} 

e hanno il codice a plug-in (textarea è stato utilizzato per appunti).

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

E la mia Qestion è questo: può javascript rilevare quanto grande tastiera virtuale è? O forse c'è un altro modo per cambiare la dimensione della pagina Web in modo che sia solo nella parte visiva (non dove la tastiera è)? O forse qualcosa non va nel mio codice, non è stato progettato per funzionare su dispositivi mobili. La dimensione della tastiera è sempre la stessa, anche se l'utente ne installa uno diverso?

Answer 1

Da quello che ho visto, quando viene visualizzata la tastiera virtuale, la pagina non viene ridimensionata (per adattarsi all'area di visualizzazione più piccola, visibile con la tastiera virtuale attivata). Quindi questo non darà alla tua pagina un suggerimento sul fatto che la tastiera sia attiva o meno. E non penso davvero che ci sia un altro modo per ottenere queste informazioni.

È possibile eseguire una configurazione in cui si guarda l'agente utente e, se si tratta di un telefono Android, quando l'utente fa clic su vari elementi di immissione del testo, si crea un po 'di spazio nella parte inferiore dello schermo per la tastiera virtuale.

Per le dimensioni della tastiera, lo stock Android potrebbe avere una dimensione o un rapporto o una percentuale standard, ma combinato con il fatto che ci sono molti mod Android e il fatto che ci siano più risoluzioni e schermate dello schermo i rapporti là fuori si traducono in non essere in grado di avere un numero fisso per questo (come la tastiera è alta x pixel o la percentuale dello schermo). Tuttavia, è possibile ipotizzare che occorra circa la metà dello schermo in basso.

Quindi, in pratica, utilizzando l'agente utente, la risoluzione dello schermo e il fatto che l'utente abbia "cliccato" su un campo di immissione del testo, è possibile ottenere un'idea decente se visualizzare o meno una tastiera virtuale e quanto spazio lasciare da parte per questo.

Answer 2

Se si sta cercando il modo per mantenere il contenuto del terminale visibile anche quando la tastiera si apre, non è necessario conoscere le dimensioni della tastiera. Il problema è nell'altezza "#shell". Prova ad aprire Strumenti per sviluppatori su Chrome (desktop) e ridimensionare la finestra. Vedrai che l'altezza del div "#shell" è sempre adatta all'altezza del dispositivo, non all'altezza dell'area del contenuto. Quindi, quando la tastiera si apre, il contenuto si troverà sul retro della tastiera. Per farlo funzionare, è necessario forzare l'altezza "#shell" per adattarla all'area del contenuto. Cerco di modificare il css e funziona correttamente nel mio emulatore Android. Rimuovere anche il touch-scroll js dalla tua pagina, non è necessario. Puoi aggiungere questo codice CSS al tuo file css.

#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; 
} 

Spero che questo aiuto.:)

Answer 3

1 È possibile utilizzare l'attributo android:windowSoftInputMode all'interno dell'elemento <activity> nel proprio Manifest.xml per selezionare tra varie strategie di ridimensionamento quando viene visualizzato l'IME. Questi includono (non limitato a):

adjustResize, che ridimensionerà la vista del contenuto dell'attività (e la WebView in esso) per adattarsi allo spazio rimanente.

adjustPan, che lascerà la visualizzazione del contenuto per riempire l'intero schermo, parzialmente occlusa dalla finestra dell'IME.

Giocare con questi potrebbe già darvi il comportamento che state cercando.

2 Il comportamento predefinito di Android quando si scorre una vista (Web) quando si apre l'IME è che tenta di mantenere il cursore visibile. Nel tuo caso stai posizionando il cursore (o: focus) su una vista nascosta. Questo spiega il comportamento strano che stai vedendo e penso che faresti bene a cambiare la tua implementazione. Perché non stai utilizzando una textarea visibile in primo luogo? Il tuo testo dovrà finire da qualche parte, giusto? E poi Android gestirà il focus/scroll automaticamente.

Come soluzione temporanea: qualcosa che potresti provare è posizionare la tua vista nascosta in modo più intelligente e cancellare il suo contenuto di volta in volta, evitando così il tuo problema di scorrimento. Ovviamente la fattibilità di questa opzione dipende dal tuo caso d'uso esatto.

3 Questa sarà la risposta alla domanda che si sta chiedendo, ma sono sicuro di come questo vi aiuterà (forse a causa della mia inesperienza con html):

per ottenere l'altezza del WebView (che è dimensioni schermo - altezza IME) in javascript effettuare le seguenti operazioni:

• nel vostro manifesto, aggiungere l'attributo android:windowSoftInputMode="adjustResize" al vostro elemento.

• estendere il layout esterno così:

  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(); 
      } 
  } 
  } 
  

• Scambia il vostro vecchio layout per quello appena creato nel file layout.xml.

• Nel codice di attività, fare qualcosa di simile:

  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); 
  } 
  } 
  

Naturalmente nel loadURL() chiamata si dovrà chiamare un metodo javascript definita. Ovviamente puoi anche passare l'altezza dell'IME se esegui alcuni calcoli.