2012-06-25 26 views
7

Estoy tratando de establecer el foco en un cuadro de texto oculto. Quiero que cuando el cuerpo o div que contiene el cuadro de texto se cargue, el foco debe estar en el cuadro de texto en particular, de modo que cualquier entrada del teclado o de cualquier otro dispositivo quede atrapada por este elemento. He probado el siguiente código sin efecto:tratando de establecer el foco en un cuadro de texto oculto

<body> 
    <input type="text" id="exp" maxlength="16"></input> 
    <input type="text" id="exp2" maxlength="16"></input> 
    <script> 
     $("#exp").hide(); 
     $("#exp").focus(); 
     $("#exp2").keypress(function(){ 
      alert($("#exp").val()); 
     }); 
    </script> 
</body> 

hacer alguna sugerencia. Se prefiere la solución jquery.

+1

Los elementos ocultos no pueden enfocar, por diseño. ¿Qué esperas exactamente que pase? Puede establecer el enfoque cuando aún esté visible y luego ocultarlo. –

+1

El elemento oculto tiene pantalla: ninguno; Entonces, ¿cómo pueden enfocarse. Por Barbosa –

+0

No puedo imaginar por qué querrías hacer esto. Además, las etiquetas de entrada son etiquetas de cierre automático.

Respuesta

12

No puede establecer el foco en un cuadro de texto que está oculto mediante el método hide. En cambio, debes moverlo fuera de la pantalla.

<body> 
<!-- it's better to close inputs this way for the sake of older browsers --> 
<input type="text" id="exp" maxlength="16" /> 
<input type="text" id="exp2" maxlength="16" /> 
<script> 
// Move the text box off screen 
$("#exp").css({ 
    position: 'absolute', 
    top: '-100px' 
}); 
$("#exp").focus(); 
$("#exp2").keypress(function(){ 
alert($("#exp").val()); 
}); 
</script> 
</body> 
+0

haciendo esto la #exp nunca podrá volver a su ubicación anterior –

+0

Normalmente no desea que un cuadro de texto oculto que se está utilizando para capturar las claves vuelva a la vista. Pero puede llevarlo a su lugar anterior: '$ ('# exp'). Css ('posición', 'estático');' –

+0

Cumple con mis requisitos ... aunque no era lo que estaba buscando. .. sems un poco de la solución de caja ....:) ... gracias de todos modos ... –

1
visibility:hidden; 
position: absolute; 

Obras en Chrome 53, y parece más limpio que tratar de cambiar el elemento fuera de la pantalla como en la respuesta de Nathan pared.

Cuestiones relacionadas