Test de prise en charge des nouveaux types d'input.

**Luke spywoker** · 24/03/2012, 18h29

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 :

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

**Rachel** · 24/03/2012, 21h04

Bonsoir

Bonne idée cette page

Test de prise en charge des nouveaux types d'input.

HTML

Vue hybride

Discussions similaires

Partager

Partager