Styliser le champ pour qu'il contienne des symboles
Lorsqu'il s'agit d'inclure les symboles dans cette number vous pouvez utiliser une solution de contournement comme celle-ci :
HTML :
<span id="number-container">
<input type="number" name="number" id="number-field" value="500" />
<span id="number-container-symbol">$</span>
</span>
CSS :
#number-container {
position: relative;
}
#number-container-symbol {
left: 5pt;
position: absolute;
top: 0px;
}
#number-field {
background-color: transparent;
padding-left: 10pt;
}
Considérez-le comme une preuve de concept. Voir ce jsfiddle pour un exemple concret. Cela ressemble à cela dans Chrome :
![enter image description here]()
Définir une granularité plus petite
Sur la base de la documentation sur la saisie des numéros (Editor's Draft) à définir la granularité vous devez ajouter step="<some-floating-point-number>" de l'attribut <input> étiquette :
<input type="number" name="number" value="500.01" step="0.01" />
et il fonctionnera dans de nombreux navigateurs modernes. Voir ce jsfiddle pour les tests.
Conclusion
Vous devriez être en mesure de le styliser pour qu'il contienne les symboles dont vous avez besoin. Il existe également une fonctionnalité qui, selon la documentation, permet de prendre en charge les nombres à virgule flottante.
Solution alternative - champ vide devant quelque chose d'autre
Vous pouvez également faire croire à quelqu'un qu'il voit le contenu du champ de saisie. mais lui montrer quelque chose d'autre derrière le champ (c'est une extension de ma solution originale). Ensuite, si quelqu'un touche le champ, vous pouvez propager la valeur appropriée, etc., puis revenir à l'état précédent en cas de flou. Voir ce code ( exemple en direct sur jsfiddle - la couleur bleue signifie que vous regardez quelque chose qui n'est pas dans le champ) :
// store original value from INPUT tag in jQuery's .data()
var input_field = jQuery('#number-field');
var display_span = jQuery('#number-container-value');
var base_val = parseFloat(input_field.val());
input_field.data('storedVal', base_val);
input_field.val('');
display_span.html(base_val);
// react to field gaining and losing focus
jQuery('#number-field').on('focus', function(event){
var el = jQuery(this);
var display = jQuery('#number-container-value');
if (typeof el.data('storedVal') != 'undefined'){
el.val(el.data('storedVal'));
};
display.html('');
}).on('blur', function(event){
var el = jQuery(this);
var display = jQuery('#number-container-value');
var new_val = parseFloat(el.val());
el.data('storedVal', new_val);
display.html(new_val);
el.val('');
});
(le code complet avec le style est sur le jsfiddle mentionné). Le code a besoin d'être raccourci et nettoyé, mais il s'agit d'une preuve de concept . Essayez-le et partagez vos conclusions, s'il vous plaît.
