Remplissage automatique des champs de saisie (correctif pour l’élément input list datalist) - nschonni/wet-boew GitHub Wiki

english

Table of Contents Overview Purpose Rationale Implementation Example Code Exemples Développement Problèmes connus Historique des versions Références

Chef du projet : Eric Poirier (@ericpoirier)

Needs translation

The HTML5 input list attribute and the datalist element add auto-complete functionality to specific text input fields by dynamically displaying a list of words that match the user’s input. Because some browsers do not support this functionality natively, this polyfill emulates the same functionality using generic HTML and WAI-ARIA.

Browsers that do not support the input list attribute and the datalist element natively ignore the auto-complete functionality and therefore, the text input field behaves like it normally does. This polyfill ensures that the auto-complete functionality is added to the text input field and the necessary information is exposed to assistive technologies by adding WAI-ARIA.

To use the polyfill, the standard input list attribute and datalist element must be used. In cases where browser don't support the attribute and element, the polyfill is automatically loaded.

Note: Remove space in "< !--"

<label for="ville">Ville</label>
<input type="text" id="ville" name="ville" list="suggestions" />
<datalist id="suggestions">
	< !--[if lte IE 9]><select><![endif]-->
	<option label="" value="Calgary"></option>
	<option label="" value="Edmonton"></option>
	<option label="" value="Iqualuit"></option>
	<option label="" value="Ottawa"></option>
	<option label="" value="Montréal"></option>
	<option label="" value="St. John"></option>
	<option label="" value="St. John's"></option>
	<option label="" value="Toronto"></option>
	<option label="" value="Vancouver"></option>
	<option label="" value="Whitehorse"></option>
	<option label="" value="Winnipeg"></option>
	<option label="" value="Yellowknife"></option>
	<!- -[if lte IE 9]></select><![endif]-->
</datalist>

Exemple pratique

• Exemple en anglais
• Exemple en français

La remplissage automatique est dépendent sur le soutien natif pour l'attribute input list et l'élément datalist de HTML5 et le correctif pour la remplissage automatique.

Le code pour la remplissage automatique se trouve à plusieurs endroits dans la répertoire source de la BOEW :

• js/polyfills/datalist.js - contient le code JavaScript pour la remplissage automatique
• js/sass/includes/_datalist.scss - contient le CSS pour la remplissage automatique
• js/sass/includes/_datalist-ie7.scss - contient le CSS spécifique à IE7 pour la remplissage automatique

Il n’existe actuellement aucun problème connu.

• Datalist.js
• _datalist.scss
• _datalist-ie7.scss

• Attribut list de HTML5
• Élément datalist de HTML5