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> |
Partager