Mostra zero decimale finali su input numerico HTML

Question

Ho problemi a visualizzare il valore di campo predefinito di "1,10" su Safari mobile. Poiché l'ultima cifra è uno zero, viene visualizzata come "1.1". Non ho questo problema sui sistemi desktop e viene mostrato solo su Safari mobile.

Se si imposta il valore predefinito su "1.11", vengono visualizzate tutte le cifre, tuttavia "1.10" viene visualizzato come "1.1". In che modo forzare Mobile Safari a visualizzare "1.10" come valore del modulo predefinito?

Questo è il mio codice.

 <label id="mortIns_lbl" for=mortIns>Mortgage Ins. (PMI):</label><div class="dollar">$</div> 
     <input id=mortIns class=narrow name=mortIns type=text readonly> 
     <input class="percent necessary" id=miPerc name=miPerc type=number onblur=loan() min="0" 
       max="3" 
       step=".01" 
       value="1.10"><div class="pct">%</div><a title="Most mortgage banks will require mortgage insurance if the down payment is less than 20% of the total purchase price of the property. Once 20-25% of the principal has been payed down, the PMI should be removed. However, until that happens, the mortgage insurance payment will remain. 1.1% is the average, but for further clarification talk to a professional lender.">?</a> 
     </li> 

e qui ci sono le schermate che mostrano il problema su Safari Mobile (attraverso Xcode emulatore)

La prima immagine mostra 1.11 impostato come valore di default, che mostrano le cifre corrette. Quindi impostare come 1.10, che interrompe lo zero.

Potete provare voi stessi a EZMonthlyPayment.com sul desktop e dispositivo iOS.

Answer 1

Si potrebbe usare un po 'subdolo di JavaScript per scambiare l'ingresso tra il testo e il tipo di numero:

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

Questo è solo presa da questo davvero buona risposta qui, può avere altre soluzioni al problema (anche se Non sono sicuro che funzioni con Safari mobile): How can I make the HTML5 number field display trailing zeroes?