mettre en "surbrillance" par validation clavier

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : mettre en "surbrillance" par validation clavier

odo91600

Bonjour,

J'ai une liste de tâche sous forme de tableau (1d) où je peux mettre en
surbrillance 1 seul tache à la fois en utilisant les flêches haut et bas du
clavier.
jusqu'ici, ça fonctionne.

Or, maintenant je veux pouvoir "validez" les tâches de ma liste dans l'ordre que
je veux en les forcent à rester en surbrillance si j'ai appuyer sur "validez"

head

Code :

<style type="text/css">
<!--
body {
background-image: url(./images/guide-background.png);
background-color: #000000;
.tabnormal{background-color:white; color:navy; font-weight:bold}
.tabover{background-color:green; color:white; font-weight:bold}
}
</style>
<SCRIPT LANGUAGE="JavaScript">
NavName = navigator.appName;
NavVers = navigator.appVersion;
Navigateur = NavName + " " + NavVers;
</SCRIPT>
<link href="style.css" rel="stylesheet" type="text/css">
<script language="javascript">
document.onkeypress = keyEvent;
var index;
var menu;
function init(){
index = 0;
menu = new Array(
"tache n°1",
"tache n°2",
"tache n°3",
"tache n°4",
"tache n°5"
);
drawMenu();
}
function keyEvent(e) {
var key;
if (e.keyCode) key = e.keyCode;
else key = e.which;
if(key == 116) {// rouge key
parent.window.location = './identification.html';
}
if(key == 117) {// vert key
parent.window.location = './identifica.html';
}
if(key == 118) {// jaune key
parent.window.location = './identification.html';
}
if(key == 119) {// bleu key
parent.window.location = './identification.html';
}
if(key == 38) {
// key up
if(index > 0) {
index --;
drawMenu();
}
}
if(key == 40) {
// key down
if(index < menu.length - 1) {
index ++;
drawMenu();
}
}
if(key == 13) {
// validation key
switch(index){
case 0:
parent.window.location = './tache1.html';
break;
case 1:
parent.window.location = './tache2.html';
break;
case 2:
this.className='tabover';
//break;
case 3:
this.className='tabover';
//break;
case 4:
this.className='tabover';
//break;
}
}
}
function drawMenu(){
var str = '<table style="table">';
for(var i = 0; i < menu.length ; i++) {
if(i == index) str += '<tr><td class="selected" height="25" width="650">   ' + menu[i] + "</td></tr>";
else str += '<tr><td class="normal" height="25">   ' + menu[i] + "</td></tr>";
}
str += "</table>";
document.getElementById("tablo" ).innerHTML = str;
}
</script>

et body

Code :

<body topmargin="0" marginheight="0" onload='init()' >
<p><div id="tablo" style="position:absolute;top:90px;left:-5px;"></div></p>
</body>

je cherche une solution et je suis novice.

merci
odo

Publicité

mvdp

Dans ton javascript le var index ne joue aucun rôle.
var index est défini dans la ligne 27 avec la valeur 0.

Tu as beau à faire des tests (switch), dans ton script sa valeur ne bouge pas est reste toujours à zéro.

mvdp

Sorry, j'étais trop vite.
Peut-être ceci:

Code :

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style type="text/css">
body {background-color: #FFFFFF;}
.tabnormal{background-color:white; color:navy; font-weight:bold;}
.tabover{background-color:green; color:white; font-weight:bold;}
.tabdone{background-color:red; color:black; font-weight:bold;}
</style>
<script language="javascript">
document.onkeypress = keyEvent; var index; var menu;
var drap= new Array;
function init(){
menu = new Array("tache n°1","tache n°2","tache n°3","tache n°4","tache n°5" );
for(var i = 0; i < menu.length ; i++) {drap[i]=0}
index = 0; drawMenu();
}
function keyEvent(e) {
var key;
if (e.keyCode) key = e.keyCode;
else key = e.which;
if((key == 38) && (index > 0)) {index --;drawMenu();} // key up
if((key == 40) && (index < menu.length - 1)) index ++; drawMenu(); } // key down
if(key == 13) {drap[index]="1"; drawMenu()} // validation key
}
function drawMenu(){
var str = '<table style="table">';
for(var i = 0; i < menu.length ; i++) {
var h="tabnormal"; //neutre
if(index==i){h="tabover" ; } //on y est
if(drap[i]==1) {h="tabdone"} // c'est fait
str += '<tr><td class="'+h+'" height="25" width="650">   ' + menu[i] + "</td></tr>";
}
str += "</table>";
document.getElementById("tablo" ).innerHTML = str;
}
</script>
</HEAD>
<body topmargin="0" marginheight="0" onload='init()' >
<p><div id="tablo" style="position:absolute;top:90px;left:-5px;"></div></p>
</body>
</BODY>
</HTML>

Mais attention, si tu ne sauvegarde pas quelque part le var drap, cela ne fonctionne tant que tu restes sur la page actuelle!

odo91600

Merci d'avoir répondu;
je pense avoir attaqué trop gros par rapport à mes compétences avec cette question.
Je vais donc reformuler complètement différemment sur un autre post (ce sera plus logique)

odo

FORUM HardWare.fr

Programmation

HTML/CSS

mettre en "surbrillance" par validation clavier

Sujets relatifs
je viens de rendre mon site dynamique et je ne sait comment le mettre	balise textarea --> mettre une valeur pas default invisible
[Access] Mettre une valeur dans une zone de texte venant d'une table ?	[Excel] mettre à jour un classement
problème pour mettre un fond dans <body>	[RESOLU] Dreamweaver - Validation submit
Mettre un site en page de démarrage	1 erreur de validation CSS 2.0
mettre en ligne mon site	[Resolu] 1 erreur de validation XHTML 1.0
Plus de sujets relatifs à : mettre en "surbrillance" par validation clavier

Page générée en 0.064 secondes