Pour démarrer cette nouvelle année, profitant du ciel gris, j’ai passé la journée, FIP dans les oreilles, à ramer sur la compréhension de la gestion des événements keypress « deprecated » donc à oublier et keydown pour un élément HTML5 de type input , voici ce que je retiens .
Mon objectif est de ne conserver/capturer que les valeurs correspondant aux touches « lettres » , « Chiffres » et « ponctuations » du clavier, en rejetant les touches de contrôle Backspace, Shift,Home, Ctrl, Escape, Delete, Alt gr,Arrow downn up right left, etc..
La fonction déclenchée par l’événement ressemble à çà
function onKeyDown(event) {
var c=event.charCode || event.keyCode || event.which;
String.fromCharCode(c) ou String.fromCodePoint(c) fonctionnent correctement pour visualiser le caractère,
event.key donne le code décimal qui représente la touche qui a été activée.On trouve une page O’Reilly qui liste toutes ces valeurs,cf LIENS.
Testé sur Firefox 84.0 Unbuntu 18.04 , Windows10 avec Edge 87.0.664 et Google Chrome avec une tablette tactile, je croyais être arrivé à une maîtrise de l’objet lorsque je me décide à tester sur mon Android Samsung Galaxy S5 ( un peu ancien mais pas trop ). et là … terreur ça ne fonctionne plus : tous les caractères fournissent un code 229.
Aprés une bonne heure à lire les discussions de stackoverflow.com, les articles de developer.mozilla.org et d’autres, je comprends qu’il n’y a pas de solution évidente sinon de recourir à l’événement oninput pour Android.
Ce qui dans la forme aboutit à un résultat identique mais
autant keydown réagit à tout type de touche utilisée, input ne s’intéresse qu’aux caractères, nombre et caractères et ponctuation, caractères spéciaux ( slash, parenthèses, crochets etc…)
LIENS
Généralités – www.geeksforgeeks.org/onkeypress-onkeyup-and-onkeydown-events-in-javascript/
Keyboard Key Code Values – www.oreilly.com/library/view/javascript-dhtml/9780596514082/apb.html
oninput – developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event
KeyboardEvent.key – developer.mozilla.org/fr/docs/Web/API/KeyboardEvent/key
CODE HTML CSS Jacvascript
<!DOCTYPE html">
<html>
<head>
<title>AJAX : Exemple de client</title>
<meta charset='utf-8' />
<meta name='viewport' content='initial-scale=1.0'>
<style>
.bord {border:solid 1px #dd0000; border-radius:4px; }
.vert {border:solid 1px #00dd00;}
</style>
<script type="text/javascript">
var http; // Notre objet XMLHttpRequest
function onKeyDown(event) {
var c=event.charCode || event.keyCode || event.which;
var a= event.keyCode || event.keyIdentifier ;
a= event.KeyboardEvent;
var props="";
//for (prop in event){ props+= event + " => " +event[prop] + "\n"; }
// console.log(props);
var cfcc=String.fromCharCode(c);
var cfcp=String.fromCodePoint(c);
var cafcc=String.fromCharCode(a);
document.getElementById("kdtrace0").innerHTML += c +',';
document.getElementById('kdtrace1').innerHTML += event.key;
document.getElementById('kdtrace2').innerHTML += cfcc;
document.getElementById('kdtrace3').innerHTML += cfcp;
//document.getElementById('kdtrace4').innerHTML += a+','+cafcc;
//document.getElementById('kdtrace4').innerHTML += '<em>'+a+'</em>';
regExp= /([ a-zA-Z]|\*)/;
regExp2= /(^[6][5-9]|[7-8][0-9]|^[9][0]|^[1][7][0])/;
if( regExp.test(cfcc)) {
//document.getElementById('kdtrace9').innerHTML +=cfcc;
}
if(c==8){
var ir=document.getElementById('kdtrace9').innerHTML;
document.getElementById('kdtrace9').innerHTML+='<';
ir=ir.substring(0,ir.length-1);
document.getElementById('kdtrace9').innerHTML=ir;
ir=document.getElementById('kdtrace4').innerHTML;
ir=ir.substring(0,ir.length-1);
document.getElementById('kdtrace4').innerHTML=ir;
// document.getElementById('kdtrace4').innerHTML.replaceAll(".$","");
} else {
if( regExp2.test(c)) {
document.getElementById('kdtrace9').innerHTML +=event.key;
}
}
}
function OnInput() {
var oi=document.getElementById('inputArea').value;
document.getElementById('kdtrace4').innerHTML='<b>'+oi+'</b>';
}
</script>
</head>
<body>
<div>
<p>
<form name="SAISIE" class="" >
<input name="INPUT" id="inputArea" size="30" type="text" placeholder=" vos lettres ici" oninput='OnInput()'>
<!--<input name="INPUT" id="inputArea" size="30" type="text" placeholder=" vos lettres ici" onkeydown="onKeyDown(event)"> -->
</form>
<script type='text/javascript'>
var key_pressed= document.getElementById('inputArea');
key_pressed.addEventListener("keydown",onKeyDown);
key_pressed.focus();
</script>
</p>
<br/>keydown 0 UNICODE <p id='kdtrace0' class='bord'></p>
<br/>keydown 1 E.key <p id='kdtrace1' class='bord'></p>
<br/>keydown 2 CharCode <p id='kdtrace2' class='bord'></p>
<br/>keydown 3 CodePoint <p id='kdtrace3' class='bord'></p>
<br/>keydown 4 oninput <p id='kdtrace4' class='bord vert'></p>
<br/>keydown 9 resultat <p id='kdtrace9' class='bord'></p>
</div>
</body>
webOR 