D'entrée pour les valeurs en pourcentage

J'ai quelques entrées sur ma webapp où nous demandons à l'utilisateur d'entrer des valeurs en pourcentage (e.g de 10,75%, 23%). Actuellement, ils doivent entrer ces valeurs décimales (par exemple, 0.1075 , soit 0,23).

Ce qui est source de confusion pour certains utilisateurs, donc j'espérais qu'il y a un moyen que je pourrais convertir les valeurs de et à partir de ces formats (le backend a des valeurs décimales, le HTML entrées afficher les valeurs de pourcentage). Est-il une solution à cela, sans avoir à rouler-mon-propre avec du javascript ou autres?

Je n'ai rien vu dans le HTML5 entrées, pour ce faire, et je n'étais pas en mesure de trouver une lib javascript qui permettrait de le faire facilement.

Quoi d'autres personnes fait en pourcentage des entrées en HTML?

Informations Supplémentaires

De la webapp est en utilisant Java/Spring, de sorte que les valeurs provenant de la page HTML sont à venir de la chaîne des objets de java en question, donc, idéalement, je suis à la recherche de quelque chose qui ne prend pas toutes les backend de codage.

Réponse

Il s'avère que le Printemps 3.0 fera automatiquement. En annotant les champs en question avec:

@NumberFormat(style = NumberFormat.Style.PERCENT)
private BigDecimal rate;

Permettra de faire la conversion vers et depuis le champ de saisie.

InformationsquelleAutor John Farrelly | 2012-12-08
  1. 2

    Le javascript nécessaire est très simple. Par exemple, vous pouvez stocker la fraction de la valeur de l'entrée de l'utilisateur dans un champ masqué lorsque l'utilisateur soumet.

    ​<form id="myForm">
    <input type="text" id="myPercent" name="myPercent" />%
    <input type="hidden" id="myFraction" name="myFraction" />
    <input type="submit" />
</form>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
<script type="text/javascript">
    document.getElementById('myForm').onsubmit = function() {
        document.getElementById('myFraction').value = 
            document.getElementById('myPercent').value / 100;
    }
</script>
    InformationsquelleAutor Stuart
  2. 1

    Il est simple de math... 75 à .75 est de 75/100. Inclure une ligne qui convertit les nombres après qu'ils les ont soumis.

    • Idéalement, j'espérais de tout faire dans une zone de saisie (sans l'aide de champs cachés). Il peut être un peu déroutant pour l'utilisateur si 10,75% de changements de 0.1075 après avoir perdu un champ.
    • Ne pouvez-vous pas le faire sur soumettre ensuite? Afficher un signe "%" après l'entrée de la boîte, ils type 75, puis lorsque vous soumettez le formulaire, vous divisez par 100?
    • Je ne comprends pas vraiment votre problème. Laissez-leur type dans le 75. Quand ils le présenter, vous le divisez par 100 dans votre code...et si vous voulez retourner un pour cent de la valeur juste de le multiplier par 100, puis le retourner. Peut-être vous avez besoin de nous donner un peu plus d'informations sur la façon dont votre webapp œuvres.
    • J'ai ajouté quelques informations supplémentaires sur la question. Les valeurs sont à venir tout droit vers/à partir d'objets java, j'ai donc été à la recherche pour éviter backend des modifications de code si possible.
    • Vous pouvez utiliser le css pseudoclass :after pour ajouter un signe de pourcentage après la zone d'entrée.
    • Je suis à la peur que vous avez à accepter le fait que, dans la programmation de 75% est .75 . C'est juste la façon de comment cela fonctionne 🙂 Donc vous aurez à calculer le pourcentage de la valeur si vous voulez que l'utilisateur à taper dans 75. Ce n'est pas une grosse affaire, si, il suffit de créer une fonction pour convertir l'entrée et de l'appeler à chaque fois que vous en avez besoin.
    • J'espérais qu'il y aurait un moyen plus élégant. Je vais avoir à multiplier toutes les valeurs par 10 lors du remplissage des champs d'entrée aussi.
    • Même si je trouve un ressort de réponse spécifique qui fait ce dont j'ai besoin, j'ai accepté cette réponse, car il a l'air comme c'est le HTML/Javascript façon de le faire!

    InformationsquelleAutor Lotzki