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 ...

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

JavaScript

Vue hybride

Discussions similaires

Partager

Partager