{"id":1496,"date":"2021-03-16T21:01:12","date_gmt":"2021-03-16T20:01:12","guid":{"rendered":"https:\/\/ekiwi.de\/?p=1496"},"modified":"2021-03-16T21:01:12","modified_gmt":"2021-03-16T20:01:12","slug":"javascript-und-html-eingabe-feld-nur-ganze-werte-zulassen","status":"publish","type":"post","link":"https:\/\/ekiwi.de\/index.php\/1496\/javascript-und-html-eingabe-feld-nur-ganze-werte-zulassen\/","title":{"rendered":"JavaScript und HTML-Eingabe-Feld: nur ganze Werte zulassen"},"content":{"rendered":"<p>Wie kann ich nur ganze Zahlen in einem HTML-Eingabefeld zulassen.<\/p>\n<p><!--more--><\/p>\n<p>Folgende Situation: wir haben ein Eingabefeld in einem HTML-Formular. Hier wollen wir nur ganze Zahlen zulassen. Gibt der Benutzer andere Werte ein, wollen wir das Feld zur\u00fccksetzen und auch Komma-Werte wollen wir nicht erlauben:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2021\/03\/eingabe_ganze_zahlen.gif\" alt=\"\" width=\"450\" height=\"250\" class=\"alignnone size-full wp-image-1497\" \/><\/p>\n<h2>Umsetzung mit Java-Script<\/h2>\n<p>Zuerst legen wir unser Eingabefeld an:<\/p>\n<pre>\r\n&lt;input class=&quot;w3-input&quot; type=&quot;number&quot; id=&quot;myinput&quot; value=&quot;0&quot; onfocusout=&quot;checkNumber(this);&quot;&gt;<\/pre>\n<p>Beim Verlassen des Eingabefeldes rufen wir die Funktion &#8222;checkNumber&#8220; auf. In dieser wollen wir nun die Eingabe \u00fcberpr\u00fcfen und ggf. korrigieren. Dazu legen wir folgenden Java-Script-Code im Dokument an:<\/p>\n<pre>\r\n&lt;script type=&quot;text\/javascript&quot;&gt;\r\n    function checkNumber(element) {\r\n        let value;\r\n        value = parseInt(element.value);\r\n        if(isNaN(value)) value = 0;\r\n        element.value = value;\r\n    }\r\n&lt;\/script&gt;<\/pre>\n<p>Was passiert hier? Zuerst lesen wir das Eingabefeld aus und wandeln den Wert in einen Integer-Wert um. Klappt das nicht, setzen wir den Wert auf 0 und setzen den Wert wieder in das Formularfeld.<\/p>\n<p><a href=\"https:\/\/ekiwi.de\/tryit\/?id=150\" target=\"_blank\" rel=\"noopener\">Hier geht es zum Online-Beispiel<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>Wie kann ich nur ganze Zahlen in einem HTML-Eingabefeld zulassen.<\/p>\n","protected":false},"author":1,"featured_media":217,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[15],"tags":[18,4,44],"class_list":["post-1496","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-formular","tag-html","tag-javascript"],"_links":{"self":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/1496","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/comments?post=1496"}],"version-history":[{"count":0,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/1496\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media\/217"}],"wp:attachment":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media?parent=1496"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/categories?post=1496"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/tags?post=1496"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}