Test de prise en charge des nouveaux types d'input.
Salut les Hypertexteurs,
Je vous présente ici une petite page, a exécuter par votre navigateur préféré, qui teste quels nouveaux types de input du HTML5 sont pris en charge par celui-çi.
Faite un simple copier/coller dans un fichier et lancer le avec votre navigateurs favoris, suite a quoi vous verrez apparaître des pop-ups vous informant sur les input pris en charge grace a un petit algorithme javascript.
NB: Quand un navigateur ne prend pas en charge un type d'input il transforme celui-ci en type text.
Code:
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
| <!DOCTYPE html>
<html lang='fr'>
<head>
<title>Test de prise en charge des nouveaux input du HTML 5</title>
<meta charset='utf-8'>
<script>
function inputHadType(type) {
var monInput;
// création de l'input
monInput = document.createElement('input');
// attribution du type de l'input
monInput.type=type
// Vérification de la prise en charge du type
if (monInput.type == type) {
return true
}
else {
return false
}
}
</script>
</head>
<form name='toKnow'>
color:<input type='color' required name='color'><br>
date:<input type='date' required name='date'><br>
datetime:<input type='datetime' required name='datetime'><br>
datetime-local:<input type='datetime-local' required name='datetime-local'><br>
email:<input type='email' required name='email'><br>
image:<input type='image' required name='image'><br>
month:<input type='month' required name='month'><br>
number:<input type='number' required name='number'><br>
range:<input type='range' required name='range'><br>
search:<input type='search' required name='search'><br>
tel:<input type='tel' required name='tel'><br>
time:<input type='time' required name='time'><br>
url:<input type='url' required name='url'><br>
week:<input type='week' required name='week'><br>
</form>
<script>
// Boucle sur un formulaires contenant les nouveaux types
for (v in document.forms['toKnow'].elements) {
if (inputHadType(document.forms['toKnow'].elements[v].type)) {
// Retourne 'text' si le type n'est pas pris en charge
// Car un navigateur le transformerai en type='text' si le type n'est pas pris en charge
if (document.forms['toKnow'].elements[v].type != 'text') {
alert('type supporté: '+document.forms['toKnow'].elements[v].type)
}
}
}
</script>
</body>
</html> |
PS: Pour voir, pour un type pris en charge, quelles données sont acceptées effacez les autres input et ajouter un bouton de soumission. L'attribut required vous aidera a savoir quelles données sont acceptées par l'input en faisant des tentatives de validation, vous verrez... :ccool:
