Saisie de numéro HTML5 - affichage en pourcentage au lieu de décimal
J'ai un formulaire comprenant des entrées numériques censées représenter des pourcentages, qui sont configurés approximativement comme ci-dessous:
<input type="number" min="0" max="1" step="0.01" />
Actuellement, les valeurs apparaissent sous forme de nombres décimaux, par exemple, 0,25. Je pense que ce serait beaucoup plus convivial si le nombre affiché dans le champ de texte était affiché sous forme de pourcentage. J'ai déjà désactivé la saisie au clavier sur le terrain à l'aide du code jQuery ci-dessous, je ne m'inquiète donc pas pour les utilisateurs qui saisissent des valeurs non autorisées:
$('input[type="number"]').keypress(function (field) {
field.preventDefault();
});
Existe-t-il un moyen simple de modifier les champs de numéro pour afficher un pourcentage?
Je vous remercie!
J'espère que cela fonctionnera de deux manières.
Si vous voulez des pourcentages en entrée et avez besoin de le convertir en décimales en js, alors:
<input type="number" min="1" max="100" id="myPercent"/>
en js:
document.getElementById('myForm').onsubmit = function() {
var valInDecimals = document.getElementById('myPercent').value / 100;
}
Si le scénario est inversé, alors:
<input type="number" min="0" max="1" step="0.01" id="myPercent"/>
en js:
document.getElementById('myForm').onsubmit = function() {
var valInDecimals = document.getElementById('myPercent').value * 100;
}
Peut-être ajouter une fonction, le nombre sorti (par exemple 0,25) * 100 + "%", de cette façon vous l'aurez toujours en pourcentage.
function topercentage() {
var outputnumber = outputnumber * 100 + "%";
}
Dans cet exemple, outputnumber est le numéro, par exemple 0.25. J'espère que ça marche.