Gestion touche tabulation

Version imprimable

17/07/2020, 13h37
ridha11111

Gestion touche tabulation

Bonjour;

j'avais une probleme avec le touche tabulation en passer d'Input vers autre , je vais executer un code de java script en cliquant en touche tabulation, mais l'orsque je mettre la condition( event.keyCode == 9 ), rien ne se passe
il y a t'il une methode pour eviter cette probleme.

Merci.

ridha

Salut

Peut être que

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
	<body>
		<input type="text" size="40" onkeydown="myFunction(event)">
		<p id="demo"></p>
 
		<script>
                        function myFunction(event) {
                                var msg = "";
                                event.preventDefault();
                                if (event.shiftKey===true) {
                                        if (event.key!=="Shift"){msg = ", touche shift enfoncée, ";}
                                }
                        document.getElementById("demo").innerHTML = "Key = " + event.key + msg;
                }
                </script>
	</body>
</html>

Pour être plus complet (cela me fera un mémo)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="fr"> <!-- ABaseHTML.html -->
 
	<head>
		<meta http-equiv="content-type" content="text/html"; charset="utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Démo tabulation</title>
	</head> 
	<body>
 
	<p>Essayez la tabulation entre ces 3 inputs.</p>
	<input type="text" id="in1" size="40" onkeydown="myFunction(this,event)" onfocus="PrendFocus(this)" onblur="PerdFocus(this)">
	<input type="text" id="in2" size="40" onkeydown="myFunction(this,event)" onfocus="PrendFocus(this)" onblur="PerdFocus(this)">
	<input type="text" id="in3" size="40" onkeydown="myFunction(this,event)" onfocus="PrendFocus(this)" onblur="PerdFocus(this)">
 
	<script>
 
                function myFunction(obj,event) {
                        if (event.key==="Tab"){                         
                                event.preventDefault();
                                if (event.shiftKey===true) {//Tabulation AVEC le shift
                                        switch (obj.id) 
                                        {
                                                case "in1":document.getElementById("in3").focus();break;
                                                case "in2":document.getElementById("in1").focus();break;
                                                case "in3":document.getElementById("in2").focus();
                                        }               
                                }
                                if (event.shiftKey===false) {//Tabulation SANS le shift
                                        switch (obj.id) 
                                        {
                                                case "in1":document.getElementById("in2").focus();break;
                                                case "in2":document.getElementById("in3").focus();break;
                                                case "in3":document.getElementById("in1").focus();
                                        }               
                                }
                        }
                }
                //----------------------------- Colorisation ou non des input suivant le focus ----------------------------
                function PrendFocus(el) {el.style.backgroundColor = "#ccffcc";return;}
                function PerdFocus(el) {el.style.backgroundColor = "White";return;}
                document.getElementById("in1").focus();
        </script>
 
	</body>
</html>

Salut

Une dernière version, pas besoin de retoucher la partie JavaScript si vous ajoutez un ou plusieurs <input type="text"> dans la partie HTLM du code

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="fr"> <!-- ABaseHTML.html -->
 
	<head>
		<meta http-equiv="content-type" content="text/html"; charset="utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Démo tabulation</title>
	</head> 
	<body>
 
		<p>Essayez la tabulation entre ces 3 inputs.</p>
		<input type="text" id="in1" data-Num="1" size="40" onkeydown="myFunction(this,event)" onfocus="PrendFocus(this)" onblur="PerdFocus(this)">
		<input type="text" id="in2" data-Num="2" size="40" onkeydown="myFunction(this,event)" onfocus="PrendFocus(this)" onblur="PerdFocus(this)">
		<br />
		<input type="text" id="in3" data-Num="3" size="40" onkeydown="myFunction(this,event)" onfocus="PrendFocus(this)" onblur="PerdFocus(this)">
		<input type="text" id="in4" data-Num="4" size="40" onkeydown="myFunction(this,event)" onfocus="PrendFocus(this)" onblur="PerdFocus(this)">
		<br />
		<input type="text" id="in5" data-Num="5" size="40" onkeydown="myFunction(this,event)" onfocus="PrendFocus(this)" onblur="PerdFocus(this)">
		<input type="text" id="in6" data-Num="6" size="40" onkeydown="myFunction(this,event)" onfocus="PrendFocus(this)" onblur="PerdFocus(this)">
		<script>
 
                        function myFunction(el,event) {
                                if (event.key==="Tab"){                         
                                        event.preventDefault();
                                        let NumInput = Number(el.getAttribute("data-Num")); // Numero de l'input qui à déclenché l'événement
                                        let NbrInput = document.getElementsByTagName("input").length; // nombre d'éléments <input type="text"
                                        if (event.shiftKey) {//Tabulation AVEC le shift
                                                NumInput = (NumInput !== 1)?NumInput - 1:NbrInput;
                                        }
                                        if (!event.shiftKey) {//Tabulation SANS le shift
                                                NumInput = (NumInput !== NbrInput)?NumInput + 1:1;
                                        }
                                        document.getElementById("in"+NumInput).focus();
                                }
                        }
                        //----------------------------- Colorisation ou non des input suivant le focus ----------------------------
                        function PrendFocus(el) {el.style.backgroundColor = "#ccffcc";return;}
                        function PerdFocus(el) {el.style.backgroundColor = "White";return;}
                        // donne le focus au 1er input à l'ouverture de la page
                        document.getElementById("in1").focus();
                </script>
 
	</body>
</html>