¿Puede la página web estar al tanto del teclado virtual de Android

Question

Tengo web page with jquery terminal y texto oculto (que activa el teclado virtual de Android), puedo escribir caracteres pero cuando ingreso algunos comandos el contenido se oculta detrás del teclado virtual. El contenido del terminal se desplaza hacia abajo porque cuando escribo un comando más, se desplaza. Cuando uso hardware keybaord en mi teléfono, el desplazamiento es correcto (el desplazamiento táctil todavía no funciona).

he añadido este CSS

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

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

y tienen el código de plug-in (área de texto se utiliza para el portapapeles).

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

Y mi qestion es la siguiente: puede Javascript a detectar qué tan grande es el teclado virtual? ¿O tal vez hay otra forma de cambiar el tamaño de la página web para que esté solo en la parte visual (no donde está el teclado)? O tal vez algo anda mal con mi código, no fue diseñado para funcionar en dispositivos móviles. ¿El tamaño del teclado es siempre el mismo, incluso si el usuario instala uno diferente?

Answer 1

Por lo que he visto, cuando aparece el teclado virtual, la página no cambia de tamaño (para adaptarse al área de visualización más pequeña, visible con el teclado virtual activado). Por lo tanto, esto no le dará a su página una pista sobre si el teclado está arriba o no. Y realmente no creo que haya otra forma de obtener esa información tampoco.

Puede realizar una configuración donde mire al agente de usuario, y si es para un teléfono Android, cuando el usuario hace clic en varios elementos de entrada de texto, crea un espacio en la parte inferior de la pantalla para el teclado virtual.

Para el tamaño del teclado, el stock Android puede tener un tamaño o proporción estándar o porcentaje, pero combinado con el hecho de que hay muchos modos Android más el hecho de que hay varias resoluciones de pantalla y pantalla las proporciones se traducen en que no se puede tener un número fijo para esto (como el teclado tiene x píxeles de altura oy por ciento del estado de la pantalla). Sin embargo, puede hacer una suposición de sentido común de que se necesita aproximadamente la mitad de la pantalla en la parte inferior. Básicamente, utilizando el agente de usuario, resolución de pantalla y el hecho de que el usuario ha "hecho clic" en un campo de entrada de texto, puede obtener una idea decente de si se muestra o no el teclado virtual y cuánto espacio dejar de lado por eso.

Answer 2

Si busca la manera de mantener el contenido del terminal visible incluso cuando el teclado emerge, no necesita saber el tamaño del teclado. El problema está en su altura "#shell". Intenta abrir Developer Tools en Chrome (escritorio) y cambia el tamaño de tu ventana. Verá que la altura de "#shell" div siempre se ajusta a la altura del dispositivo, no a la altura del área de contenido. Entonces, cuando el teclado emerge, el contenido estará en la parte posterior del teclado. Para que funcione, debe forzar su altura "#shell" para que se ajuste al área de contenido. Intento modificar el CSS y funciona correctamente en mi emulador de Android. También elimine el touch-scroll js de su página, no es necesario. Puede agregar este código CSS a su archivo 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; 
} 

Hope this help.:)

Answer 3

1 Puede usar el atributo android:windowSoftInputMode dentro del elemento <activity> en su Manifest.xml para seleccionar entre varias estrategias de cambio de tamaño cuando aparece el IME. Estos incluyen (sin limitación):

adjustResize, que cambiarán el tamaño de la vista de contenido de su actividad (y la vista Web en ella) para ajustarse al espacio restante.

adjustPan, que dejarán la vista de contenido para llenar toda la pantalla, parcialmente ocluida por la ventana del IME.

Jugar con estos ya puede darle el comportamiento que está buscando.

2 El comportamiento predeterminado de Android cuando se trata de desplazarse por una Vista (Web) cuando aparece el IME es que intenta mantener el cursor visible. En tu caso, estás colocando el cursor (o: foco) en una vista oculta. Esto explica el comportamiento extraño que estás viendo y creo que harías bien en cambiar tu implementación. ¿Por qué no estás usando un área de texto visible en primer lugar? Tu texto tendrá que terminar en algún lugar, ¿verdad? Y luego, Android manejará el foco/desplazamiento automáticamente.

Como solución alternativa: algo que podría intentar es posicionar su vista oculta de forma más inteligente y borrar sus contenidos de vez en cuando, evitando así su problema de desplazamiento. Por supuesto, la viabilidad de esta opción depende de su caso de uso exacto.

3 Esta será la respuesta a la pregunta que usted está pidiendo, pero estoy seguro de cómo esto le ayudará a (tal vez debido a mi falta de experiencia con el HTML):

para obtener la altura de la vista Web (que es tamaño de pantalla - altura IME) en su Javascript haga lo siguiente:

• en su manifiesto, añadir el atributo android:windowSoftInputMode="adjustResize" a su elemento.

• extienden su diseño exterior como esto:

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

• Intercambiar su antiguo trazado para el recién creado uno en su archivo layout.xml.

• En su código de actividad, hacer algo como esto:

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

Por supuesto, en el LoadURL() llame tendrá que llamar a un método JavaScript que ha definido. Por supuesto, también puede pasar en la altura del IME si primero hace algunos cálculos.