2015-07-29 9 views
92

Mam następujący html5 elementem wejściowym:Dlaczego wejście html z typem "number" pozwala na wpisanie litery "e" w polu?

<input type="number"> 

Dlaczego wejście pozwala na znak „e” należy wpisać w polu tekstowym? Żaden inny alfabet znaków może być wprowadzony (zgodnie z oczekiwaniami)

Korzystanie chrom v 44.0.2403.107

Aby zobaczyć, co mam na myśli. http://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_number

+1

Pozwala także wejść +, -, i '.' wielokrotnie w niektórych przeglądarkach. –

Odpowiedz

104

Bo to jest dokładnie jak the spec mówi to powinno działać. Wejście liczba może zaakceptować floating point numbers, w tym negatywnych symboli i e lub E Charakter:

Pewna liczba zmiennoprzecinkowa składa się z następujących części, dokładnie następującej kolejności:

  1. Ewentualnie w pierwsza postać może być postacią "-".
  2. Jeden lub więcej znaków z zakresu "0—9".
  3. Opcjonalnie następujące części, dokładnie w następującej kolejności:
    1. postać "."
    2. jeden lub więcej znaków w zakresie "0—9"
  4. ewentualnie następujących części, w dokładnie następującej kolejności:
    1. znak "e" lub "E" znak
    2. opcjonalnie, znak "-" lub "+" znak
    3. Jeden lub więcej znaków z zakresu "0—9".
+1

Ah, dzięki. Szukałem w [złą specyfikację] (http://dev.w3.org/html5/html-author/) – Gnarlywhale

+0

Nadal jestem zdumiony tym, przede wszystkim nie jestem matematykiem, więc co robi " e "oznaczać w kontekście liczby? Po drugie nie rozumiem, dlaczego input.value jest pustym łańcuchem, gdy tylko napiszesz w nim "e", mimo że istnieją liczby i postać jest dozwolona ... – Simon

+0

@Simon To wykładnik, możesz to zobaczyć w akcji, jeśli pomnożysz dużą liczbę przez dużą liczbę, a kalkulator nie ma wystarczającej liczby obsługiwanych cyfr, aby go wyświetlić. Ktoś, kto jest lepszy w matematyce, może lepiej to wyjaśnić. –

7
<input type="number" onkeydown="return FilterInput(event)" onpaste="handlePaste(event)" > 

function FilterInput(event) { 
    var keyCode = ('which' in event) ? event.which : event.keyCode; 

    isNotWanted = (keyCode == 69 || keyCode == 101); 
    return !isNotWanted; 
}; 
function handlePaste (e) { 
    var clipboardData, pastedData; 

    // Get pasted data via clipboard API 
    clipboardData = e.clipboardData || window.clipboardData; 
    pastedData = clipboardData.getData('Text').toUpperCase(); 

    if(pastedData.indexOf('E')>-1) { 
     //alert('found an E'); 
     e.stopPropagation(); 
     e.preventDefault(); 
    } 
}; 
+2

Jak pewny jesteś, że to uniemożliwi wstawienie znaku 'E' z kopią i wkleić funkcjonalność? – StephenKelzer

+1

Po prostu zaznaczone, masz rację, to nie działa dla kopiowania i wklejonych danych wejściowych. – Gnarlywhale

+0

Masz poprawną @StephenKelzer. Dodałem kod do obsługi tego. – TruthSeeker

10

Możemy zrobić to tak proste jak poniżej

<input type="number" onkeydown="javascript: return event.keyCode == 69 ? false : true" />

+1

Lepiej używać 'return event.keyCode! == 69', ponieważ unika niepotrzebnego operatora trójskładnikowego .Nie poleciłbym również wstawiania. –

Powiązane problemy