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,'');">
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
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' />
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" >
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" >
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.