2010-05-25 3 views
2

Je construis une boîte de mot de passe qui contient trois zones de texte. Chaque zone de texte comporte un caractère. Après avoir tapé le premier caractère du mot de passe, je dois appuyer sur la touche tab ou utiliser la souris pour accéder à la deuxième zone de texte pour saisir le deuxième caractère du mot de passe. Je voudrais que cela se fasse automatiquement (mouvement du curseur) juste après avoir tapé dans la première zone de texte.Comment déplacer le curseur de la première zone de texte à une seconde zone de texte, sans utiliser de tabulation ou la souris?

comment puis-je y parvenir? Si vous le demandez, j'utilise Visual Studio .NET 2008 en C# Je suis un débutant parfait en .net et je ne sais pas comment poser cette question avec les mots appropriés.

Merci.

+0

ok, le projet est en .NET et le code n'utilise pas un 'champ de saisie' Il utilise ceci: UXdesigner

Répondre

3

Essayez onKeyPress. Cela devrait prendre soin de ce que vous cherchez.

<input type="text" name="password" onKeyPress="autoTab()" /> 

<script type="text/javascript" language="JavaScript"> 
    function autoTab() { 
    //do stuff 
    } 
</script> 

Voici un tutoriel traitant de la modification de la position du curseur d'un champ.

http://www.webdeveloper.com/forum/showthread.php?t=91817

Cela suggère votre fonction autoTab() devrait ressembler à ceci.

function autoTab(field,nextFieldID){ 
    if(field.value.length >= field.maxLength){ 
    document.getElementById(nextFieldID).focus(); 
    } 
} 
+0

Nous vous remercions de votre aide . Je vous en suis reconnaissant. Le problème est, dans mon cas, ce n'est pas un champ de saisie. Comme il est écrit en .net, nous utilisons une ligne comme ceci: UXdesigner

+0

Cela ne devrait pas poser de problème, il suffit de mettre votre onTouche auto = on = () "' élément dans cette asp: TextBox et utilise 'txtPwd2' est l'entrée de autoTab() quand vous passez du champ 1 au champ 2. –

0
if textbox1.text.length > 0 then textbox2.focus(); 
1

Utilisez-vous jQuery dans votre projet?

<!DOCTYPE html> 
<html> 
<head> 
<title>example</title> 
<style type="text/css"> 
    * 
    { 
     margin: 0; 
     padding: 0; 
    } 
</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript"> 

    $(function() { 

     $('#data1').keyup(function() { 

      if ($(this).val().length == 1) { 

       $('#data2').focus(); 
      } 

     }); 

    }); 

</script> 
</head> 
<body> 
<input id="data1" type="text" value="" style="width: 10px" /><br /> 
<input id="data2" type="text" value="" style="width: 10px" /> 
</body> 
</html> 
+0

Même si vous n'êtes pas:' document.getElementById ('data1'). onkeyup = function() {if (this.value.length == 1) document.getElementById ('data2'). focus(); }; ' – nickf

+0

J'ai essayé cette solution et cela fonctionne. Maintenant, je dois l'essayer avec .NET pour voir si elle fait la même chose. .NET est farfelu. Je suis un débutant dans ce cadre. – UXdesigner

Questions connexes