récupérer les caractères numériques

**le_chomeur** · 14/11/2008, 10h39

salut

chose étrange , j'essaye de récupérer les caractères tapé au clavier au moment ou l'on tape dans une liste déroulante, tout va bien sauf pour les caractères tapé au pavé numérique qui me renvois abcde...

démo :

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Démo calendrier v2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function checkWord(e){
	if (!e)
	{
		e = window.event;
 
		caract =  String.fromCharCode(e.which);
	}
	else{
		caract = String.fromCharCode(e.keyCode);
	}
 
	document.getElementById('caractere').value += caract.toLowerCase();
}
 
function deleteFieldValue(){
	document.getElementById('caractere').value = "";
	setInterval(function(){deleteFieldValue()},5000);
}
</script>
</head>
<body>	
	<input type="text" id="caractere" value ="" readonly="readonly">
	<select onkeyup="checkWord(event)">
	<option>123</option>
	<option>113</option>
	<option>223</option>
	<option>323</option>
	<option>2223</option>
	<option>1233</option>
	<option>12213</option><option>123</option>
	<option>122233</option>
	<option>333123</option>
 
	</select>
	<script type="text/javascript">deleteFieldValue();</script>
</body>
</html>

pour tester : cliqué sur la liste déroulante pui appuiyer sur des lettres ou chiffres ... si le schiffres sont tapé au clavier numérique => abcde... renvoyé si tapé avec shift+ les nombres j'ai le bon retour :-/

le but final est de faire une recherche dans la liste et de sélectionner en fonction de ce que l'utilisateur aura recherché ...

**SpaceFrog** · 14/11/2008, 10h45

49 vs 97

tiens j'ai un bout de code qui va t'aider à eclaircir ton mystère

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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
 
<html>
<head>
<title>Keyboard Events and Codes</title>
<style type="text/css">
body         { font-family: Arial, sans-serif }
h1           { text-align: right }
td           { text-align: center }
</style>
 
 
<script language="JavaScript" type="text/javascript">
// array of table cell ids
var tCells = ["downKey", "pressKey", "upKey", "downChar", "pressChar", "upChar", "keyTarget", "character"];
// clear table cells for each key down event 
function clearCells() {
	for (var i = 0; i < tCells.length; i++) {
			document.getElementById(tCells[i]).innerHTML = "&mdash;"; 
			} 
} 
 
// display target node's node name
function showTarget(evt) { 
	var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null); 
	if (node) { 
				document.getElementById("keyTarget").innerHTML = node.nodeName; 
				}
		 }
 
// decipher key down codes 
function showDown(evt) {
		clearCells(); 
		evt = (evt) ? evt : ((event) ? event : null); 
		if (evt) { document.getElementById("downKey").innerHTML = evt.keyCode; 
					if (evt.charCode) { 
											document.getElementById("downChar").innerHTML = evt.charCode; 
											} 
					showTarget(evt); }
		}
 
 // decipher key press codes 
 function showPress(evt) {
 		 evt = (evt) ? evt : ((event) ? event : null);
 		 if (evt) {
 		 			 document.getElementById("pressKey").innerHTML = evt.keyCode;
 		 			 if (evt.charCode) {
 		 			 						document.getElementById("pressChar").innerHTML = evt.charCode;
 		 			 						} 
 		 			 showTarget(evt);
 		 			 var charCode = (evt.charCode) ? evt.charCode : evt.keyCode; 
 		 			 // use String method to convert back to character 
 		 			 document.getElementById("character").innerHTML = String.fromCharCode(charCode); 
 		 			 }
 		 	}
 
// decipher key up codes 
function showUp(evt) {
					evt = (evt) ? evt : ((event) ? event : null);
					if (evt) { document.getElementById("upKey").innerHTML = evt.keyCode;
								if (evt.charCode) { 
													  document.getElementById("upChar").innerHTML = evt.charCode; 
													  } 
								showTarget(evt); 
								}
					 }
 
// set page-wide event listeners
 document.onkeydown = showDown; 
 document.onkeypress = showPress; 
 document.onkeyup = showUp; 
 </script> 
 
 
 
</head>
 
<body>
<h1>Key and Character Codes vs. Event Types</h1>
<hr>
<p>Enter some text with uppercase and lowercase letters:<br>
</p>
<form>
	<input type="text" id="entry" size="60" onkeydown="showDown(event)"	onkeypress="showPress(event)" onkeyup="showUp(event)">
</form>
<table border="2" cellpadding="5" cellspacing="5">
	<caption>Keyboard Event Properties</caption>
	<tr>
		<th>Data</th>
		<th>keydown</th>
		<th>keypress</th>
		<th>keyup</th>
	</tr>
	<tr>
		<td>keyCode</td>
		<td id="downKey">—</td>
		<td id="pressKey">—</td>
		<td id="upKey">—</td>
	</tr>
	<tr>
		<td>charCode</td>
		<td id="downChar">—</td>
		<td id="pressChar">—</td>
		<td id="upChar">—</td>
	</tr>
	<tr>
		<td>Target</td>
		<td id="keyTarget" colspan="3">—</td>
	</tr>
	<tr>
		<td>Character</td>
		<td id="character" colspan="3">—</td>
	</tr>
 
 
</table>
 
</body>
</html>

**le_chomeur** · 14/11/2008, 11h07

yes mais le problème persiste s'il s'agit d'une liste déroulante ==>

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Démo calendrier v2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
 function showPress(evt) {
 		 evt = (evt) ? evt : ((event) ? event : null);
 		 if (evt) {
 
 		 			 var charCode = (evt.charCode) ? evt.charCode : evt.keyCode; 
 		 			 // use String method to convert back to character 
 		 			 document.getElementById("caractere").value = String.fromCharCode(charCode); 
 		 			 }
 		 	}
</script>
</head>
<body>	
	<input type="text" id="caractere" value ="" onkeyup="checkWord(event)">
	<select onkeypress="showPress(event)">
	<option>123</option>
	<option>113</option>
	<option>223</option>
	<option>323</option>
	<option>2223</option>
	<option>1233</option>
	<option>12213</option><option>123</option>
	<option>122233</option>
	<option>333123</option>
 
	</select>
	<script type="text/javascript"></script>
</body>
</html>

je tape un caractère dans l'input => ok
sur la liste => Ko

EDIT ==> RESOLU CODE MIS A JOUR

FF ne raffraichissait plus ma page

**le_chomeur** · 14/11/2008, 15h35

hé non :-/
le keyup et le onkeypress ne renvoit pas le même char code

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Démo calendrier v2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
 function showPress(evt) {
 		 evt = (evt) ? evt : ((event) ? event : null);
 		 if (evt) {
 
 		 			 var charCode = (evt.charCode) ? evt.charCode : evt.keyCode; 
 		 			 // use String method to convert back to character 
 		 			 document.getElementById("caractere").value += String.fromCharCode(charCode); 
 		 			 }
					 ok = false;
					 selectChoice();
					 return false;
 }
 
var tempo = null;
var ok = false; 
function resetField(){
		if(!ok){
			document.getElementById("caractere").value = '';
			tempo = setTimeout(function(){resetField()},3000);
		}
}
 
function selectChoice(){
	var listeValue = document.getElementById('testChoice').options;
		for(var i = 0 , l = listeValue.length ; i < l ; i++){
			if(document.getElementById("caractere").value == listeValue[i].text){
				alert(document.getElementById("caractere").value +"=="+ listeValue[i].text);
				document.getElementById('testChoice').selectedIndex = i;
				ok = true;
				alert("trouve : " + i);
 				break;
			}
 
		}
}
 
</script>
</head>
<body>	
	<input type="text" id="caractere" value ="">
	<select onkeypress="showPress(event);return false;" size="5" id="testChoice" >
	<option>123</option>
	<option>113</option>
	<option>223</option>
	<option>323</option>
	<option>2223</option>
	<option>1233</option>
	<option>12213</option><option>123</option>
	<option>122233</option>
	<option>333123</option>
 
	</select>
	<script type="text/javascript">resetField()</script>
</body>
</html>

spaffy : test en remplacant onkeypress par onkeyup ...
l'évènement de sélection du select reprend le pas sur ma méthode avec le keypress

**SpaceFrog** · 14/11/2008, 15h36

tu as testé le code que je t'ai filé ?
c'est exactement ce que cela démontre ...

**le_chomeur** · 14/11/2008, 15h54

oui testé

je pensais que l'erreur venais de moi ...

merdoum ...

on avait pas traité un sujet dans le même style il n'y a pas longtemps ??
sur une selection dans une listebox lorsque l'on tape un caractère !?

**SpaceFrog** · 14/11/2008, 15h58

listbox taper un caractère ?
heu tu veux dire emulation de combo ?
avec un input text

**le_chomeur** · 14/11/2008, 16h24

non non

tu click sur une listbox ( un select quoi ^^ )
et tape des caractère , la liste se positionne sur l'élément de la liste qui corespond mais uniquement en fonction du premier caractère tapé ...
la il faudrait pouvoir taper une suite ( voir un mot ) et que la liste se positionne dessus

récupérer les caractères numériques

JavaScript

Vue hybride

Discussions similaires

Partager

Partager