d'abord détecter si le navigateur peut gérer HTML 5 alors utiliser quelque chose comme ceci:
$('input').each(function (i, item) {
if ($(item).attr('min') !== undefined && $(item).attr('max') !== undefined) {
var select = document.createElement("SELECT");
$(select).attr('name', $(item).attr('name'));
$(select).attr('id', $(item).attr('id'));
$(select).attr('disabled', $(item).attr('disabled'));
var step = 1;
if ($(item).attr('step') !== undefined) {
step = parseFloat($(item).attr('step'));
}
var min = parseFloat($(item).attr('min'));
var max = parseFloat($(item).attr('max'));
var selectedValue = $(item).attr('value');
for (var x = min; x <= max; x = x + step) {
var option = document.createElement("OPTION");
$(option).text(x).val(x);
if (x == selectedValue) { $(option).attr('selected', 'selected'); }
$(select).append(option);
};
$(item).after(select);
$(item).remove();
}
});
Puisque vous ne pouvez pas utiliser le sélecteur input[type=range]
je devais aller à l'approche $(item).attr('min') && $(item).attr('min')
, cela va être un peu bizarre si vous avez d'autres types de contrôles d'entrée avec ces deux attributs.
J'aime ça. Peut-être quelque chose comme 'jQuery.support.rangeInput = ((jQuery.browser.safari) || (jQuery.browser.opera && jQuery.browser.version> = 2.0))' pour vérifier la prise en charge d'entrée de gamme? –
Merci d'avoir complété le code :) –
J'aurais préféré une amélioration progressive de la dégradation gracieuse car il est possible que je rencontre un navigateur qui ne supporte ni 'ni Javascript sur, donc les entrées ne sera jamais converti. Pourtant, il répond au moins à la question. –