| Accueil | table JavaScript | index JavaScript | précédent | suivant |

Les événements clavier

Voici deux scripts simples pour montrer le traitement des événements du clavier. Le premier ci-dessous comporte deux champs de saisie. Le premier est recopié dans un paragraphe lors de la frappe (notez l'emploi de keyCode et de which). Dans le deuxième, les letrres frappées sont converties en majuscules (l'événement utilisé est ici onkeyup car onkeypress n'intervient qu'après l'affichage par le navigateur, des lettres frappées dans le champ).

Ces scripts utilisent la fonction document.getElementsByTagName(), les événements onkeypress, onkeyup, les attributs event, this, keyCode, which.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Titre de cette page : exemple12</title>
<meta name="description" content="Phrase décrivant clairement cette page" />
<meta name="keywords" content="mot1 mot2, mot3 mot4 mot5, mot6" />
<link rel="stylesheet" type="text/css" href="Jstyle05.css" />

<script type="text/javascript">
function copy(e)
{
var key; // numéro de la touche frappée
if(e.which == undefined)
{key=e.keyCode;} // Internet Explorer
else
{key=e.which;} // autres navigateurs
var char=String.fromCharCode(key); // caractère frappé
var copyField=document.getElementsByTagName("p");
copyField[0].innerHTML=copyField[0].innerHTML.concat(char);
}

function upper(elem)
{
elem.value=elem.value.toUpperCase();
}
</script>

</head>

<body>
<!-- Jscript12 -->

<div id="cadre1">
<h2>Entrée clavier</h2>
<p class="texte1" >
<b>texte saisi : </b>
</p>
<div id="cadre2" >
<table>
<tr class="texte1">
<td>
textes à saisir :
</td>
<td>
<form action="Jscript12.html" method="post" >
<input type="text" onkeypress="copy(event)" name="champ1" size="20" maxlength="20" value="" /><br/><br/>
<input type="text" onkeyup="upper(this)" name="champ2" size="20" maxlength="20" value="" />
<input type="submit" name="envoi" value="envoyer" />
</form>
</td>
</tr>
</table>
</div>
</div>

</body>
</html>


Afficher cette page


Ce deuxième script affiche dans un paragraphe les lettres frappées n'importe où dans la zone qui le contient.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Titre de cette page : exemple13</title>
<meta name="description" content="Phrase décrivant clairement cette page" />
<meta name="keywords" content="mot1 mot2, mot3 mot4 mot5, mot6" />
<link rel="stylesheet" type="text/css" href="Jstyle05.css" />

<script type="text/javascript">
function copy(e)
{
var key; // numéro de la touche frappée
if(e.which == undefined)
{key=e.keyCode;} // Internet Explorer
else
{key=e.which;} // autres navigateurs
var char=String.fromCharCode(key); // caractère frappé
var copyField=document.getElementsByTagName("p");
copyField[0].innerHTML=copyField[0].innerHTML.concat(char);
}

function upper(elem)
{
elem.value=elem.value.toUpperCase();
}
</script>

</head>

<body onkeypress="copy(event)" >
<!-- Jscript13 -->

<div id="cadre1">
<h2>Entrée clavier</h2>
<p class="texte1" >
<b>texte saisi : </b>
</p>
</div>

</body>
</html>


Afficher cette page



suivant