Cosa voglio: A, in primo piano, cambia una casella di input in un'altra da hide() e show().Internet explorer, jQuery: casella di input salta/si sposta quando viene sostituita con la stessa identica
Cosa ottengo: In Internet Explorer (7/8), la casella di immissione sposta alcuni pixel verso destra durante la messa a fuoco.
- Funziona bene con altri browser (ovviamente).
Ecco un link a dove ho ricreato il problema:
< collegamento rimosso a causa di non più beeing rilevanti>
La sorgente è disponibile nel file linkato sopra , ma lo includerò anche qui per tua comodità.
<!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 per una domanda ben formulata! ;)
EDIT:
Quando ho messo i campi del modulo in una tabella che funziona come previsto. Immagino che a volte devi andare con delle soluzioni come queste, ma odio non sapere perché. Sto comunque bene con la spiegazione che i diversi browser disegnano gli elementi di input del modulo in modo diverso (e che in IE il pulsante di input influisce sul resto degli elementi).
codice di lavoro:
<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>
Grazie, probabilmente hai ragione riguardo al fatto che l'input nascosto è attaccato vicino al pulsante di invio. Tuttavia, mettere un margine su di esso non funziona per me. – Mattis
Il margine destro seleziona il lato verso il pulsante di immissione. Tuttavia, lo spazio tra l'e-mail e il campo di immissione della password si sposta ancora. E il margine destro lo fa spostare anche nell'altra direzione negli altri browser ... :) – Mattis
Ritengo che la tua risposta sia la più giusta, il problema si basa sicuramente sul modo in cui il browser interpreta gli input del modulo.Li ho messi in un tavolo (codice inserito nella domanda) e tutto va bene. Grazie! – Mattis