Lo que quiero: Para, en foco, cambiar un cuadro de entrada en otro por ocultar() y mostrar().Internet Explorer, jQuery: cuadro de entrada salta/se mueve cuando se reemplaza por el mismo
Lo que obtengo: En Internet Explorer (7/8), el cuadro de entrada se mueve unos pocos píxeles hacia la derecha al enfocar.
- Funciona bien en otros navegadores (obviamente).
Aquí hay un enlace a donde he vuelto a crear el problema:
< Enlace eliminado debido a ya no beeing relevante>
La fuente está disponible en el archivo vinculado anteriormente , pero lo incluiré aquí también para su conveniencia.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<meta http-equiv="Content-language" content="en"/>
<script src="includes/jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){
$("#index_login_dummy").focus(function(){
$(this).hide();
$('#index_login_dummy2').show().focus();
});
});
</script>
<style type="text/css">
.input_h {display:none;}
</style>
</head>
<body>
<div id="index_login">
<form method="post" name="index_login" action="login.php">
<input id="index_login_email" type="text" value="Email" name="email">
<input id="index_login_dummy" type="text" value="Password" name="dummy">
<input id="index_login_dummy2" type="text" class="input_h" value="Password" name="dummy"><input type="submit" class="input_button" value="Login">
</form>
</div>
</body>
</html>
+1 para una pregunta bien formulada! ;)
EDIT:
Cuando puse los campos de formulario en una tabla funciona según lo previsto. Supongo que a veces tienes que ir con soluciones como estas, pero odio no saber por qué. Sin embargo, estoy de acuerdo con la explicación de que los diferentes navegadores dibujan los elementos de entrada de forma de manera diferente (y que en IE el botón de entrada afecta al resto de los elementos).
código de trabajo:
<div id="index_login">
<form method="post" name="index_login" action="login.php">
<table>
<tr>
<td><input id="index_login_email" type="text" value="Email" name="email"></td>
<td><input id="index_login_dummy" type="text" value="Password" name="dummy"><input id="index_login_dummy2" type="text" class="input_h" value="Password2" name="dummy"></td>
<td><input type="submit" class="input_button" value="Login"></td>
</tr>
</table>
</form>
</div>
Gracias, probablemente tenga razón sobre el problema de que la entrada oculta se adjunta cerca del botón Enviar. Sin embargo, ponerle un margen no funciona para mí. – Mattis
El margen-derecho no ordena el lado hacia el botón de entrada. Sin embargo, el espacio entre el correo electrónico y el campo de entrada de contraseña todavía se aleja. Y el margen derecho también hace que se mueva en la otra dirección en los otros navegadores ... :) – Mattis
Considero que tu respuesta es la más acertada, el problema depende de cómo interprete el navegador las entradas del formulario.Los puse en una mesa (ingresé el código en la pregunta) y todo está bien. ¡Gracias! – Mattis