JavaScript: Wie kann ich den Wert eines Eingabefelds bereits während der Eingabe prüfen?

Hey Leute, ich habe eine Frage zu JavaScript.

Ich möchte gerne, dass mein input-Feld number, das, wenn das erste getippte Zeichen eine Zahl ist, eine alert-Meldung ausgibt und sagt, es ist eine Nummer. Wenn es ein Buchstabe ist, dann soll es sagen, dass es ist keine Zahl ist.

Es soll direkt bei Eingabe geprüft werden und nicht erst, nach Klick auf etwas oder so ähnlich.

Ungefähr so:

listener

if (erstes Zeichen eine Nummer) {
  alert("es ist eine nummer");
else {
  alert("es ist keine nummer");
}

2 Antworten

apachy

30.03.2019, 09:07

Warum sollte man sowas machen?

Davon ab, einfach einen EventListener auf das Input-Feld, der z.B. beim input, keypress oder anderen Event, je nach gewünschten Verhalten triggert, schauen ob die Länge vom input.value === 1 ist und in dem Fall schauen, ob es eine Nummer ist z.B. mit !isNaN oder isInteger, alternativ den keyCode vom Event auswerten und den Bereich der Zahlen abfragen.

Natürlich hast du die Ausgabe dann doppelt, wenn man Zeichen wieder löscht, du kannst dir natürlich ansonsten die vorherige Länge merken und beim Schritt von 2 auf 1 keine Meldung erzeugen bzw. wenn die aktuelle Taste !== Backspace und Delete ist, wobei man natürlich auch eine Selection usw. überschreiben kann, damit ist wohl nur das Merken eine konsistente und leichte Möglichkeit.

Woher ich das weiß:Berufserfahrung – Softwareentwickler/Projektleiter seit 2012

threadi

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, Internet, HTML

29.03.2019, 20:47

https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Number/isInteger

Woher ich das weiß:Recherche

Ep1cNinja

Fragesteller

29.03.2019, 20:53

Das funktioniert bei mir nicht

number.addEventListener("input", function() {if (Number.isInteger(integer)) {alert("Fits");}alert("No");}})

threadi

29.03.2019, 22:35

@Ep1cNinja

Kanns auch nicht, wenn Du nicht richtig abschreibst. Einrückung hilft zudem beim Überblick.

number.addEventListener("input", function() {
   if (Number.isInteger(integer)) {
      alert("Fits");
   }
   else {
      alert("No");
   }
});

Ep1cNinja

Fragesteller

30.03.2019, 18:07

@threadi

Danke ich habe es anders geschafft trotzdem danke für deine Hilfe und mit dem Tipp ;)

Ähnliche Fragen

HTML JavaScript, PAP zu script?

Hallo, meine aufgabe ist es, diesen PAP in Javascript umzuwandeln, leider verstehe ich dies nicht so richtig, ich bleibe mit den if's und else hängen, bitte um hilfe

bitte outputs in alert(" ") oder dokument.write auf keinen fall in html inputs, und inputs in prompt

...zur Frage

Verstehe nicht, warum es falsch ist?

// loggen der Variabeln-Name für den Login-Button //

let loggen = document.getElementById("login");


loggen.addEventListener("click", function() {
  
// eingabeFeld ist der Name für das Inputfeld //  
let eingabeFeld = document.getElementById("field");

eingabeFeld.value;
if (eingabeFeld.includes("huso1234")) {
alert("Ja, das Passwort ist richtig");
}
else {
    alert("Das Passwort ist falsch");
}
eingabeFeld.textContent = "";
});

Funktioniert halt einfach nicht. Es handelt sich hierbei um die Programmiersprache JavaScript. Es kommt kein Alert und am Ende geht der Text auch nicht weg vom Inputfeld.

...zur Frage

Wie kann ich mit JavaScript eine einfache Validierung umsetzen?

Hallo zusammne,

ich möchte gerne, dass wenn man in das Inputfield vom Typ email etwas eingibt, eine alert-Funktion aufgerufen wird. Die Funktion soll erst aufgerufen werden, wenn in das Eingabefeld vom Typ email fünf Zeichen eingegben worden sind.

Beispiele:

Maxmu (hier sollte das alert aufgerufen werden) stermann@muster.com, wäre richtig.
ds@d, wäre falsch, da nur vier Zeichen eingegeben worden sind und die Funktion sollte nicht aufgerufen werden.

Hier das Codebeispiel.

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="Stylesheet" href="style.css">
    <script src="Übungen.js"></script>
  </head>
  <body>
    <form>
      <label for Anmelden>Anmelden</label>
      <input type="email" name="Anmelden" id="Anmelden">
      <label for Password>Password</label>
      <input type="password" name="Password" id="Passwort">
      <button type="button" onclick="Einloggen()">Anmelden</button>
    </form>
  </body>
</html>

JavaScript:

const Anmeldedaten = document.getElementById("Anmelden").innerHTML;

function Einloggen() {
  if (Anmeldedaten.length > 5) {
    alert("Es hat geklappt!");
  }
}

Ich bedanke mich im Voraus bei euch. :)

...zur Frage

Java Script Eingabe speichern?

Hallo leute,

ich habe auf meiner Homepage in einer Alert eine Text eingabe.

Ich möchte das das was man da eingibt gespeichert wird und beim nächsten aufruf wieder aufgerufen wird.

Das ich das also nicht nochmal neu eingaben muß.

Bitte kein php.

Zur veranschaulichung:

Texteingabe --->alert die "Willkommen EINGEGEBENER TEXT" ausgibt ---> (ab hier komme ich nicht weiter) Speicherung der eingabe auf dem PC ----> beim nächsten aufruf wird das in der text datei gespeicherte ausgegeben.

Wie kann man das machen?

Mit Cookies?

...zur Frage

Programmierung in JavaScript bei der von Zufallszahlen ein Arithmetisches Mittel generiert wird?

Hey,

ich versuche seit Wochen so eine Programmierung zu meistern aber ohne Erfolg, deswegen bitte ich um Hilfe von Experten.

ich benötige eine JavaScript Programmierung, am besten in „Atom“, in der man 2 Eingabefelder hat und in einem das Maximum der Zahlen eingeben kann und in das andere die Anzahl der Zahlen eingeben kann und mit diesen Angaben der Durchschnitt (Arithmetisches Mittel) berechnet wird.

mfg

...zur Frage

E-Mail Adresse bestätigen! HTML JavaScript Code?

Hallo zusammen, ich brauche einen JavaScript Code für die zwei E-Mail Adresse zu bestätigen. Wenn eine andere oder falsche mail Adresse eintippt wie oben soll eine Fehler Meldung erscheinen!

Habe zwar eine JavaScript Code, aber der geht nicht!

function check() {

if (document.forms['Check'].elements['Bestaetigungsmail'].value != document.forms['Check'].elements['Bestaetigungsmail_2'].value) {

alert("uups!");

}

else {document.forms['Check'].submit();}

}

...zur Frage

[JavaScript] Input soll nur Zahlen und Komma nehmen?

Guten Tag,

ich kenne mich absolut nicht mit JavaScript aus.

Ich habe ein Formular, welches nur Zahlen annehmen soll. Ich habe das schon mit den Attributen type="number" pattern="[0-9]+([.,][0-9]+)?" gemacht. Aber ich bin mir sicher, dass es mit JavaScript eine bessere Lösung gibt.

Kann mir da jemand weiterhelfen?

...zur Frage

JavaScript Funktion Summe?

Hallo ich möchte ein einfaches Programm scheiben was von zwei input feldern die Zahlen nach button Bestätigung zusammenrechnet. Bin mir bei meinem Code nicht sicher. Es addiert die Zahlen nicht sondern schreibt sie zusammen. 1+2=12

<script>
function summe()
{
var z1=document.getElementById('zahl1').value;
var z2=document.getElementById('zahl2').value;


var ergebnis= (z1+z2);
document.write("Das Ergebnis ist:"+ ergebnis);
}
</script>
<input type=text id="zahl1">
<input type=text id="zahl2">
<input type=button onclick="summe()" value="=">
</body>

...zur Frage

Wie bekomme ich es hin, dass der alert bei javascript auf der Website angezeigt wird und nicht in einem extra Fenster?

Ich habe es schon mit document.write und document.get versucht. Die Aufgabenstellung lautet wie folgt:

"Erstellen Sie eine html Seite, die einen Button enthält. Klickt man auf den Button, wird eine Java Script Funktion aufgerufen, die einen beliebigen Text als alert auf der Seite ausgibt. "

Ich habe bisher folgendes:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>Test</title>
   </head>
   <body>
      <form name="button">
      <input type=button value="Alert" onclick="Box()">
      </form>
      <script language="JavaScript">
         function Box() {alert("Alarm!!")};
      </script>
   </body>
</html>

...zur Frage

HTML/Javascript: Wie erzeuge ich mehrere Eingabefelder?

Ich möchte 6 Eingabefelder erzeugen, in die man Zahlen eingeben kann. Wenn man dann auf einen Button klickt, sollen alle eingegebenen Zahlen aufgelistet werden (Zum Beispiel mit "Du hast xyz eingegeben" oder "Dein Tipp lautet xyz" oder so ähnlich)

Im Javascript-File habe ich sechs mal hintereinander prompt("Bitte gib eine Zahl ein") eingegeben, aber es werden nicht sechs Eingabefelder dargestellt, sondern ein einziges, das sich sechs mal öffnet(Erst öffnet es sich, wenn man dann eine Zahl eingibt, verschwindet es kurz und taucht dann sofort wieder auf, das ganze wiederholt sich sechs mal) Diese prompt-Befehle habe ich dann gelöscht.

Stattdessen habe ich im HTML-Dokument sechs Eingabefelder mit erzeugt und somit das Problem mit den Eingabefeldern gelöst. Der Button ist auch schon sichtbar, aber er funktioniert nicht.

Was muss ich anwenden, um sechs Eingabefelder erscheinen zu lassen und dann mit dem Button die eingegebenen Zahlen aufzulisten?

...zur Frage

Hallo, ich möchte in Python zwei int Werte mit einer If Abfrage vergleichen. Die Abfrage funktioniert aber nicht. Kann mir da jemand bitte helfen?

import random

#Function User Input

def validate_numeric(value_string, numeric_type=int):

"""Validate a string as being a numeric type"""

try:

return numeric_type(value_string)

except ValueError:

raise

#User Input Loop

global user_in

while True:

user_in = input('Please enter a number: ')

try:

result = validate_numeric(user_in, int)

except ValueError:

print('Please try again:')

continue

else:

break

#end of this loop

#Random Number

global num

num = random.randrange(1, 2, 1)

print('Die zufällige Nummer ist:',(num))

#Check if input and number are the same

if user_in == num:

print('Super, du hast die Nummer gefunden')

else:

print('Schade, das war nicht die Nummer')

Der erste Wert soll durch eine Benutzereingabe und der zweite Wert durch einen Random Number Generator kommen.

Das soll ein kleines Spiel sein, indem der Benutzer eine Zahl erraten soll

...zur Frage

Nur bestimmte Zeichen in HTML input Feld erlauben (JavaScript)?

Hi, der Titel erklärt eigentlich schon mein Problem Für meinen Code brauche ich momentan Hilfe, denn ich weiß nicht wie man es codet, dass man in ein input field nur bestimmte Zeichen erlauben kann. Bei Straßennamen bspw. Buchstaben wie "ß,ö,ü" usw. und halt auch Zahlen die dazugehören. Und gibt es document.getElementById("id-name").size noch? Mir wird in meinem Programm nur sizeToContent vorgeschlagen. Ich danke euch schon mal :)

...zur Frage

Mit Input Element rechnen (JavaScript)?

Ich fange gerade an, programmieren zu lernen (HTML, Js, CSS) und bin gerade dabei eine Website zu coden, die Meilen in Kilometer umrechnet. Man gibt beim Input Feld die Meilen ein und wenn man den Button Convert drückt sollen diese in Kilometern angegeben werden. Bei der Js Funktion mit dem Button kommt allerdings immer NaN (Not a Number) heraus, wenn ich mit dem Eingegeben weiterrechnen möchte. Wisst ihr wie man den String von der Eingabe zu einem Zahlenwert machen kann, sodass die Funktion damit weiterrechnen kann? Danke

...zur Frage

[JavaScript] Wie kann ich ein Element von Anfang an unsichtbar machen?

Und nach einem erfolgreichem Login wieder sichtbar machen. Ich habe folgenden Code:

function getKey() {


  var visible = document.getElementById("download").style.display = "visible";
  var invisible = document.getElementById("download").style.display = "none";


  var key = "abc1";


  var keY = document.getElementById("key").value;


  if (key == keY) {
    visible;
    alert("r")


  } else {
    alert("w")
  }

Weder funktioniert er, noch wird das Element download wieder angezeigt.

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen