Hoe decimale waarden in invoertypenummer te vermijden

Hoe decimale waarden te vermijden bij het invoeren van Getal in HTML5. Momenteel kan de gebruiker een decimale waarde typen.


Antwoord 1, autoriteit 100%

Een alternatief voor de verstrekte antwoorden is om de toetsaanslag te volgen tijdens de invoer. Persoonlijk vind ik het leuk om het type="number"als attribuut te laten. Hier is een JSFiddle

<form action="#" method="post">
  Numbers: <input name="num" 
                  type="number"
                  min="1"
                  step="1"
                  onkeypress="return event.charCode >= 48 && event.charCode <= 57"
                  title="Numbers only">
  <input type="submit">
</form>

Antwoord 2, autoriteit 32%

Ik heb uiteindelijk gecontroleerd om te zien of een gebruiker een periode typt en vervolgens verhinderde dat de gebeurtenis zich verspreidde.

Bewerken: een betere aanpak. Het key press-evenement is verouderd. Ook toegevoegd in een regex om alles behalve nummers [0-9] op plakken te verwijderen.

<input type="number" onkeydown="if(event.key==='.'){event.preventDefault();}"  oninput="event.target.value = event.target.value.replace(/[^0-9]*/g,'');">

Snippet uitvouwen


Antwoord 3, autoriteit 15%

Gebruik patroonkenmerk

<input type="number" name="num" pattern="[0-9]" title="Numbers only">

Voor meer details http://www.w3schools.com/tags/att_input_pattern.asp

FIDDLE


Antwoord 4, autoriteit 11%

Gewoon een voorbeeld met parseInt()

<input type="number" oninput="this.value=(parseInt(this.value)||0)" placeholder="0-9" autofocus='' value='0' />

Snippet uitvouwen


Antwoord 5, autoriteit 9%

Op basis van andere antwoorden hier, heb ik dit geprobeerd:

<input id="storeId" min="0" pattern="[0-9]" onkeypress="return !(event.charCode == 46)" step="1" title="Must be an integer number" type="number" >

Snippet uitvouwen


Antwoord 6, autoriteit 3%

<input type="number" onkeydown="return event.keyCode !== 190"> 

Hiermee wordt de invoer van de periode (.) beperkt. Voor elke sleutelbeperking:
https://css-tricks.com/snippets/javascript/javascript-keycodes/


Antwoord 7

Jullie kunnen dit proberen
Deze functie staat de gebruiker niet toe om ongewenste tekens te plakken en staat de gebruiker ook niet toe om .+-E

. in te voeren

var inputBox = document.getElementById("inputBox");
                var invalidChars = [
                    "-",
                    "+",
                    "e",
                    "."
                ];
                inputBox.addEventListener("input", function() {
                    this.value = this.value.replace(/[e\+\-\.]/gi, "");
                });
                inputBox.addEventListener("keydown", function(e) {
                    if (invalidChars.includes(e.key)) {
                        e.preventDefault();
                    }
                });
         
<input type="number" id="inputBox" >

Snippet uitvouwen


Antwoord 8

Je moet posten wat je hebt geprobeerd als je vragen stelt.

Als u alleen gehele getallen wilt gebruiken, wijzigt u het volgende kenmerk.

step="any"

naar

step="1"

Antwoord 9

Een eenvoudige regex kan dit probleem helpen oplossen.

var re = new regExp('[.]+) ;
if(!re.test(num)){listOfNumbers.push(num)};

laat de gebruiker geen ‘.’ typen op de invoer is misschien geen haalbare optie als je te maken hebt met meerdere culturen en interpretaties van ‘.’.


Antwoord 10

Probeer dit:

<input type="number"  value=""  min="0" **oninput="this.value=(parseInt(this.value)||0)" onkeypress="return !(event.charCode == 45||event.charCode == 46||event.charCode == 43)"**  class="form-control" step="any" />

Antwoord 11

@Html.TextBoxFor(model => model.num, new { @class = "form-control input-sm",@maxlength = 5 ,@oninput = "this.value = this.value.replace(/[^0-9]/g, '');"})

In MVC werkt bovenstaande oplossing.

Other episodes