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>

Présentation personnelle

Je vous propose de vous accompagner dans le parcours à entreprendre pour réaliser votre site sur Internet.

Que celui-ci soit une simple vitrine, un log ou un site marchand, les point à aborder sont nombreux, certains très « techniques », le temps à y consacrer pas facile à évaluer…

Je propose de vous apporter mon expérience et mon expertise sur ces sujets , du conseil à la mise en route et au suivi de votre site.

Un long parcours d’informaticien professionnel débuté avant que des écrans soient connecté aux « mainframes » du siécle dernier, la pratique du développement d’application de gestion, de systèmes complexes , du management d’équipes dans un contexte international, m’ont permis de conserver le goût pour le développement et une bonne vision de la technologie et de ses coûts.

Comprendre votre besoin

  • identifier avec vous les cibles que vous vous êtes donné,
  • Comprendre la façon dont vous souhaitez vous développer.
  • Estimer les moyens que vous souhaitez mobiliser
  • préciser le temps que nous aurons pour mettre en place

En nous appuyant sur des principes simples de frugalité technique – les choses simples se construisent plus vite et durent plu longtemps..;- nous élaborerons ensemble

  • L’apparence de votre site
  • la navigation que vos clients emprunteront
  • Les services que vous souhaitez mettre à disposition
  • le type d’hébergement qui vous convient et la sécurité que vous estimez devoir protéger votre site
  • le budget qui sera nécessaire.

première maquette

Une fois ces nombreux points décidés, une premiére maquette donnera vite vie à vote activité.

Je préconise souvent l’utiisation de WordPress qui offre l’avantage de faciliter une mise ne route rapide et vous permettra , si vous le souhaitez, de pouvoir gérer vous-même le contenu de votre siteb, ou de votre blog.