Raccord touche (Saisie de numéro de téléphone)

**d3LTa7** · 15/10/2019, 14h13

Bonjour !!

Dans le cadre d'un exercice qui consiste à trouver la méthode la plus pénible d'insérer un numéro de téléphone (il y en a plein sur le net est certains sont assez drôle ^^ ), Je voulais faire en sorte que la personne ne puisse utiliser que un clavier alphabétique pour rentrer des numéros !

Voici mon code :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!doctype html>
<html lang="fr">
<head>
  	<meta charset="utf-8">
  	<title>telephone</title>
  	<link rel="stylesheet" href="tel.css">
</head>
<body>
    <h1>Votre numéro de téléphone</h1>
    <div>
        <p>Merci d'utiliser le clavier pour rentrer votre numéro de téléphone</p>
    </div>
    <div>
        <input id="insert" readonly></input>
        <button id="refresh">Reset</button>
    </div>
    <div id="clav"> 
    </div>
    <script src="tel.js"></script>
</body>

JS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
//Aray des 26 lettres de l'alphabet en code ASCII
 
var keyboard = [
    { 'charCode':98, 'keyName':'a'},
    { 'charCode':99, 'keyName':'b'},
    { 'charCode':100, 'keyName':'c'},
    { 'charCode':101, 'keyName':'d'},
    { 'charCode':102, 'keyName':'e'},
    { 'charCode':103, 'keyName':'f'},
    { 'charCode':104, 'keyName':'g'},
    { 'charCode':105, 'keyName':'h'},
    { 'charCode':106, 'keyName':'i'},
    { 'charCode':107, 'keyName':'j'},
    { 'charCode':108, 'keyName':'k'},
    { 'charCode':109, 'keyName':'l'},
    { 'charCode':110, 'keyName':'m'},
    { 'charCode':111, 'keyName':'n'},
    { 'charCode':112, 'keyName':'o'},
    { 'charCode':113, 'keyName':'p'},
    { 'charCode':114, 'keyName':'q'},
    { 'charCode':115, 'keyName':'r'},
    { 'charCode':116, 'keyName':'s'},
    { 'charCode':117, 'keyName':'t'},
    { 'charCode':118, 'keyName':'u'},
    { 'charCode':119, 'keyName':'v'},
    { 'charCode':120, 'keyName':'w'},
    { 'charCode':121, 'keyName':'x'},
    { 'charCode':122, 'keyName':'y'},
    { 'charCode':123, 'keyName':'z'},
];
//création de différentes variables
 
var tab = ['0','1','2','3','4','5','6','7','8','9']
var clavier = document.getElementById('clav');
var insertion = document.getElementById('insert');
var reset = document.getElementById('refresh');
 
//création du clavier et insertion de celui dans le dom dans la div "clav"
 
keyboard.forEach(function(key){
    var touche = document.createElement('button');
    touche.className = 'touche';
    touche.setAttribute('id','touche-'+key.charCode);
    touche.setAttribute('data-key',key.charCode);
    touche.textContent = key.keyName;
    clavier.appendChild(touche);
});
 
//création de l'évènement au click
 
var clik = document.querySelectorAll('.touche');
clik.forEach(function(argu){
    argu.addEventListener('click',function(event){
        var chiffre = tab[argu.textContent.charCodeAt(0) % 10]
        insertion.value = insertion.value + chiffre;
        });
});
 
//création de l'évènement au keypress
 
var tutch = document.querySelectorAll('.touche');
tutch.forEach(function(argu){
    argu.addEventListener('keypress',function(event){
        var keybo = event.charCode;
        if (tutch){
        var chiffre = tab[argu.textContent.charCodeAt(0) % 10];
        insertion.value = insertion.value + chiffre;
        }
    })
})
 
//creation event du reset
 
reset.addEventListener('click',function clear(){
    insertion.value = "";
});

Le problème est que je n'arrive pas à faire le lien correctement entre les touches réelles et celle faite par le code. :/

Autre question que je ne comprend pas et pourtant ça marche très bien... C'est le passage du modulo !! Je comprend pas pourquoi avec la lettre "c" il m'affiche bien le 10ème élément du tableau (et donc à l'indice 9) alors que son chartCode est 100 et donc il devrait m'afficher autre chose vu que 100%10 = 0 !!
J'ai même fait un petit code à part qui reprenais mon code et celui ci m'affiche bien le 0:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
var array = ['0','1','2','3','4','5','6','7','8','9'];
var chiffre = 100 % 10;
console.log(array[chiffre]);

je comprends pas trop le délire...

Bref merci d'avance =)

Invité · 15/10/2019, 15h32

Bonjour,

1- je me trompe, ou tu t'es inspiré de mon clavier "Halloween" : https://codepen.io/jreaux62/pen/ZMyBvp ?

2- je trouverais plus intéressant (et utile) de simuler un "vrai" claviers de téléphone à touches (avec la touche "+" pour l'indicatif).

Sinon, (pour rester dans ton "délire"),... un "téléphone à cadran", avec la roue qui tourne et le bruit caractéristique !
https://fr.wikipedia.org/wiki/Clavie...ne_is_real.JPG

**d3LTa7** · 15/10/2019, 20h09

1 - Hahaha Et bien non Jreaux !! Même pas !! En faite, je sors d'une semaine de préselection pour une formation de web développeur que je veux faire depuis 2 ans mais c'est sur sélection... Bref... Et l’exercice nous a été proposé à la fin de la semaine... Et j'ai pas eu le temps de le finir et je le fait là du coup... Mais sans un prof derrière qui t'aide c'est plus complexe haha... Par contre je me suis inspiré d'un code que j'ai fait y'a un moment avec des sons de batterie... Alors peut être qu'a ce moment là tu m'avais aidé avec ton hallowen... Mais du coup j'arrive pas à transposer cette manière de faire avec mon code

2 - Je comprend pas trop là.... C'est justement le principe de trouvé la façon la plus pénible et tordue de rentrer un numéro de tel

3 - Déjà fait !! regarde ce liens

https://www.goldens.fr/goldenmoustac...ne-formulaire/

**SpaceFrog** · 16/10/2019, 08h36

Je trouverais plus pénible de devoir taper 5 fois une touche pour enregistrer le chiffre 5 puis de valider

05 = valider + touche + touche + touche + touche + touche + valider
89= touche + touche + touche + touche + touche + touche + touche + touche + valider + touche + touche + touche + touche + touche + touche+ touche+ touche + touche + valider

super pénible...
facile à coder juste un incrément sur un appui de touche et une validation

sinon un clavier qui shuffle à chaque sélection ...
Ou encore un clavier aléatoire ... la touche ne renvoie pas la valeur indiquée, et change de valeur (random) à chaque appui
https://jsfiddle.net/wb0j63Lv/3/ si ça c'est pas pénible ...

une variante avec le clavier qui shuffle en plus
https://jsfiddle.net/wb0j63Lv/6/

on pourrait aussi imaginer devoir taper en toutes lettres le chiffres zéro, un , deux ... à partir de lettres du clavier de téléphone ABC DEF ...

zéro => 9376
un => 86 ...

Invité · 16/10/2019, 10h31

Bonjour,

attention de ne pas confondre "pénible" et "impossible" (random,...).

D'autres idées qui me viennent :

le classique "code morse" : soit les chiffres (assez facile), soit en toutes lettres (Z.E.R.O.,...)
chiffres en toutes lettres, mais dans un autre langage (allemand, espagnol,..... ou en changeant de langue à chaque numéro !)
...

**SpaceFrog** · 16/10/2019, 10h38

Ce n'est pas impossible, j'ai réussi à composer mon numéro en à peu près 3 minutes ...

il suffit d'effacer la dernière entrée tant qu'elle ne correspond pas ...

Invité · 16/10/2019, 10h41

Je retire ce que j'ai dis...

On trouve bien pire dans les exemples déjà réalisés : https://www.goldens.fr/goldenmoustac...ne-formulaire/

**SpaceFrog** · 16/10/2019, 10h50

^^
Au vu du bon sens commun qui règne en ces temps difficiles, je pense avoir inventé l'IA du futur

La version finale:
https://jsfiddle.net/dqpz0cjg/9/

Invité · 16/10/2019, 10h58

Dans le futur (très/trop proche), I.A. signifiera "Imbécilité Atavique"...

Dans les pays développés, on est de plus en plus bête

**d3LTa7** · 16/10/2019, 11h34

HAHAHA vous m'avez bien fait rire vous 2 =D

Mais effectivement j'avais déjà pensé à un mode "hardcore" dont valeur lettre/chiffre changeait à chaque sélection de lettre !!

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
var alea = 0;
var aray = [];
 
var clik = document.querySelectorAll('.touche');
clik.forEach(function(argu){
    argu.addEventListener('click',function(event){
        aray[alea] = Math.floor(Math.random() * 10 + 0);
        var chiffre = aray[alea]
        insertion.value = insertion.value + chiffre;
        alea++;
    });
});

Mais c'était impossible !!

En tout cas merci pour vos réponses ! Je vais essayé de faire quelques chose avec tout ça !!
Mais effectivement SpaceFrog tes idées frôlent l’impossible... Enfin heureusement qu'il y à le retour arrière... Cependant, tu as fait cela avec du JQuerry, et je ne le maitrise pas... (d'ailleurs on m'a dit que celui ci allait devenir obsolète dans pas longtemps et qu'il ne sera pas vu pendant ma formation...)
Effectivement j'avais pensé à ce que les valeurs lettre/chiffre changent au moins à chaque reset

Envoyé par SpaceFrog

super pénible...
facile à coder juste un incrément sur un appui de touche et une validation

Ba justement j'y arrive pas :/ j'ai eu un pseudo résultat mais toute les touches me donnaient le même chiffre et en plus le "a" ne marchait pas :/

**SpaceFrog** · 16/10/2019, 12h04

ça fait 10 ans que Jquery doit être obsolète ^^

**d3LTa7** · 16/10/2019, 13h46

Ha ? Ba je sais pas... Je suis moins caler que vous dans le domaine pour le moment !!

Bref... je pense ne pas être très loin...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
document.addEventListener('keypress',function(event){
    var push = document.getElementById('touche-'+event.charCode);
    if(push){
        var chiffre = tab[push.textContent.charCodeAt(0) % 10];
        insertion.value = insertion.value + chiffre; 
    }
 
})

Mais il y a encore un décalage à gérer et du coup j'en reviens à ma question plus haut sur le modulo.... Pourquoi avec le "click", le modulo de la lettre "c" (chartCode 100) amène bien au "9" et qu'avec "keypress" ça mène au "8" et qu'avec ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
var array = ['0','1','2','3','4','5','6','7','8','9'];
var chiffre = 100 % 10;
console.log(array[chiffre]);

Ca nous mène à 0 ??

Invité · 16/10/2019, 14h05

Bonjour,

La méthode push() existe en JS.

Il vaudrait mieux changer le nom de ta variable.

Raccord touche (Saisie de numéro de téléphone)

JavaScript

Discussions similaires

Partager

Partager