valore Get di <input type = "numero"> con JS quando contiene caratteri non numerici

Question

This jsfiddle demonstrates the following issue.

L'esempio più semplice è:

<input id="number" type="number" value="1"> 
console.log(document.getElementById('number').value); 

Questo registra 1 come previsto. Tuttavia:

<input id="number" type="number" value="1A"> 
console.log(document.getElementById('number').value); 

Registra solo una stringa vuota '', a causa del carattere non numerico nel valore. Alcuni dispositivi + browser (ad esempio Chrome) consentono di immettere caratteri non numerici in questi input.

Questo è fastidioso perché voglio l'input type = "number" per i dispositivi che lo supportano (ad esempio iPhone, tastiera del numero iPad). Comunque voglio usare javascript per fermare l'input sporco da inserire - che richiede il recupero del valore su keyup - quindi regex sostituendo i caratteri non numerici.

Sembra che il metodo jQuery's .val() restituisca lo stesso risultato.

Answer 1

questo è quello che cercavo:

$('input[type=number]').keypress(function(e) { 
    if (!String.fromCharCode(e.keyCode).match(/[0-9\.]/)) { 
    return false; 
    } 
}); 

Capisco prevenire l'input dell'utente può essere fastidioso e questo permette ancora di ingresso non valido come 1.2.3

Tuttavia, in questa situazione è esattamente quello che mi serviva . Spero che sarà utile a qualcun altro. Grazie a @ int32_t per il suggerimento.

Answer 2

Non si deve usare <input type=number> per le cose che non sono numeri (in senso molto matematico, non funzionerà nemmeno per numeri di telefono o codici postali) e la cancellazione del valore è intenzionale.

È possibile verificare se dispositivo supporta type=number e allega il tuo ripiego solo se non lo fa:

var input = document.createElement('input'); 
input.setAttribute('type','number'); 
if (input.type != 'number') { // JS property won't reflect DOM attribute 
    polyfill_number(); 
} 

alternativa (soprattutto se il vostro numero è un codice di avviamento postale, numero di serie, ecc) è possibile utilizzare:

<input type=text pattern="[0-9]*"> 

e questo cambierà anche la tastiera.