onkeydown

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éswww.geeksforgeeks.org/onkeypress-onkeyup-and-onkeydown-events-in-javascript/
Keyboard Key Code Valueswww.oreilly.com/library/view/javascript-dhtml/9780596514082/apb.html
oninputdeveloper.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event
KeyboardEvent.keydeveloper.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>

Publié par webORfr

le développement et la montagne deux passions

Votre commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l’aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google

Vous commentez à l’aide de votre compte Google. Déconnexion /  Changer )

Image Twitter

Vous commentez à l’aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l’aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s

%d blogueurs aiment cette page :