Come posso rendere il campo del numero HTML5 visualizzato zero finale?

Question

Ho un campo:

<input type='number' /> 

mi piacerebbe pugno in 0.50 senza di essa “correggerla” per 0.5, quindi sarebbe visualizzare 0.50.

Answer 1

Ho avuto un po 'di giocare con questo e ho guardato le specifiche. Dice che deve essere un numero in virgola mobile valido. C'è una frase nel definition of a valid floating point number dà che ha catturato la mia attenzione:

Il migliore rappresentazione del numero n come un numero in virgola mobile è la stringa ottenuta dalla applicando l'operatore ToString Javascript per n.

Ciò significa che il formato sarà sempre coerente con la valutazione del numero, quindi utilizzando JavaScript toString su quel numero. Quindi niente traini 0s allora.

Quindi, dovrai ricorrere a JavaScript. Questo non è immediato perché document.getElementById('numInput').value = '0.50'; viene ancora corretto a 0.5, quindi la convalida non viene attivata a onchange dove l'azione predefinita può essere prevenuta, è attivata internamente.

Questa è la soluzione migliore che potrei venire con ... è un po 'di un hack, e avrà bisogno di un po' di tweaking per la robustezza, ma si spera che farà ciò che si vuole:

var numInput = document.getElementById('numInput'); 
numInput.addEventListener('keypress', function() { 
    this.setAttribute('type', 'text'); 
}); 
numInput.addEventListener('click', function() { 
    this.setAttribute('type', 'number'); 
}); 

Quindi, se l'utente desidera inserire il numero digitandolo, cambia il tipo di input in testo, ma quando fa clic su di esso, lo converte in un numero.

Se vuoi sempre gli 0 finali non importa quale sia l'utente, allora si potrebbe fare qualcosa di simile:

var numInput = document.getElementById('numInput'); 
numInput.addEventListener('blur', function() { 
    if (this.value === '') { 
     return; 
    } 
    this.setAttribute('type', 'text'); 
    if (this.value.indexOf('.') === -1) { 
     this.value = this.value + '.00'; 
    } 
    while (this.value.indexOf('.') > this.value.length - 3) { 
     this.value = this.value + '0'; 
    } 
}); 
numInput.addEventListener('focus', function() { 
    this.setAttribute('type', 'number'); 
}); 

Edit: Penso che la seconda soluzione è più in linea con ciò che l'utente potrebbe aspettarsi, ma significa che se l'utente digita 0.5 sarà forzato a 0.50, quindi dipende se è ciò che si desidera.

Answer 2

Ho attaccato un on evento ('cambiamento') per l'ingresso che si desidera avere trailing 0 di

$('.number-input').on('change', function(){ 
    $(this).val(parseFloat($(this).val()).toFixed(2)); 
}); 

Si prende solo il valore, l'inserisce in un galleggiante, rende ad una stringa al numero di cifre decimali e lo rimette come valore.