Beiträge von AndreasB

Wenn das beim Eingeben der Nummer sofort (auf input) passieren soll, ist das Stichwort hier: "Masked Input" und das ist eine Wissenschaft für sich.

Dafür würde dir empfehlen eine Library wie https://imask.js.org/ zu verwenden.

Wesentlich leichter ist es zu implementieren, dass die Nummer beim Verlassen (on blur) des Feldes formatiert wird.

Dazu musst du on blur den Wert auslesen und durch den Wert mit Pause ersetzen.

Sehr primitiv würde das so funktionieren:

https://codepen.io/Mr_Beer/pen/dyOQRGJ?editors=1011

basti1012 Deine Verstion hat ein Bug: Es ist nicht mehr möglich die ersten 4 Stellen mit der Backspacetaste zu löschen.

jonas3344 Danke, das hatte ich überlesen.
Ich weiß nicht, ob weaverslave eine formatting / beautify Funktion hat.

zur Not kann man auch Tools wie http://www.phpformatter.com/ verwenden um seinen Code zu formatieren.

Ich habe immer gro!en Respekt vor Leuten deren Quellcode so ungeordnet ist und die dabei nicht durchdrehen.

Ist das Netbeans?

Versuch mal deinen Code zu formatieren.

Stichpunkt "autoformat". Wenn das nicht klappt, hat dein Code Syntaxfehler.

Außerdem habe ich das Gefühl, dass deiner for-Schleife (z47 / z114) der Block fehlt.

Ich verstehe. Du möchtest keine Selection List dynamisch erstellen, sonder einen Wert in der Liste dynamisch vorauswählen.

Woher kommt denn der Wert deiner Variablen?

- Wir der im Server in die HTML Datei gesetzt? - Dann solltest du das mit dem vorauswählen gleich im Server machen.

- Aus der URL? - Dann musst du mit JavaScript die URL parsen und den Wert auslesen.

- Aus einem asynchronen Request? - Dann musst du den Wert nur daraus extrahieren.

- Aus dem local Storage? - Dann musst du den Wert nur daraus auslesen.

- Aus einem Cookie? - Dann musst du den Wert nur daraus auslesen.

danach musst du das <option>-Element mit dem benötigten Wert in dem <select> suchen und dieses mit selected kennzeichnen.

edit:
Alle möglichen Auswahlmöglichkeiten müssen natürlich vorher im <select> vorhanden sein

Es gibt im Grunde nie einen Grund das ohne die DOM Methoden zu machen.

Außer es geht darum die Möglichkeiten von JavaScript auszuloten.

Zitat von Sempervivum

Wieso document.write()?

Er wollte wissen, wir man die variable var XYZ = "1" in die Lücke ???Hier soll als Option 1 der Wert von Variable XYZ angezeigt werden??? einfügen kann, so das ein dynamischer Option-wert entsteht.

So wie in php mit <?php echo XYZ ?>. Wenn man das in JavaScript ohne die üblichen DOM Methoden umsetzen möchte kann man das mit document.write() machen.

Aber sauberer ist natürlich die DOM-API zu verwenden und daher habe ich gefragt, was er vorhat.

Zitat von Nixgehtmehr

Geht das überhaupt?

Ja, das geht (Mit JavaScript bekommt sehr vieles hin).

Wenn ich das jetzt allerdings poste bekomme ich ärger, denn document.write() verwendet man nicht.

Was hast du denn vor? Warum muss dieser Wert denn dynamisch sein?

MrMurphy Schönes Beispiel.

Wenn ich auf Run drücke, sieht das Ergebnis bei mir so aus (Ich habe nur den "Bilder mit aspect-ratio und object-fit" Ausschnitt genommen):

html-seminar.de/woltlab/attachment/2911/

Wenn ich die Properties lösche so:

html-seminar.de/woltlab/attachment/2912/

Kleine Frage: Mit welchem Browser schaust du dir das Beispiel an?

Ich hatte nämlich in #2 geschrieben:

Zitat von AndreasB

Chrome hat auch die neue CSS Property aspect-ratio:

Das war nicht nur so daher gesagt und die Kompatibilitätstabelle zeigt das auch:
html-seminar.de/woltlab/attachment/2913/

Ok, dann habe ich wohl die Frage falsch verstanden. Ich dachte Simuletsplay wollte das so:

<style>
   img {
      width: 200px;
      aspect-ratio: 16 / 9;
      object-fit: cover;
   }
</style>

<img src="https://source.unsplash.com/random/800x600">
<img src="https://source.unsplash.com/random/600x800">
<img src="https://source.unsplash.com/random/100x100">
<img src="https://source.unsplash.com/random/50x60">

Dafür kann man aspect-ratio verwenden.

Schau' dir mal diesen Abschnitt und das dazugehörige Codepen Beispiel an.
da wird mit

html-seminar.de/woltlab/attachment/2909/

direkt das Seitenverhältnis des <img> geändert ohne dass das Bild dabei verzerrt wird.

Zitat von MrMurphy

kannte ich noch nicht. Hast du mal ein praktisches Beispiel?

Schau dir mal diesen Blogeintrag an: https://web.dev/aspect-ratio/ Da gibt es auch einige Beispiele.

Zitat von MrMurphy

Bilder können per CSS nicht in andere Seitenverhältnisse gebracht werden. Dann werden sie zwangsweise verzerrt.

Das stimmt nicht. Mit Hilfe von aspect-ratio und object-fit kann man auch Bilder selber in das gewünschte Verhältnis bringen.

Allerdings; der Trick mit dem padding-top klappt nur mit Container.

Zitat von MrMurphy

Noch ein Hinweis: HTML und CSS sind keine Bildbearbeitungsprogramme [...]

Das Stimmt. In einer idealen Welt wäre das der richtige Weg. Jedoch manchmal kann man die Bilder nicht bearbeiten, da sie zum Beispiel über eine API abgerufen werden.

Vielleicht hilft dir der alte padding-top Trick?

https://css-tricks.com/aspect-ratio-boxes

Chrome hat auch die neue CSS Property aspect-ratio:

https://developer.mozilla.org/…docs/Web/CSS/aspect-ratio

Wenn du deine bisherige Lösung behalten möchtest, kannst du den background-image Style auch inline setzen.

Hallo puqexoxu,

du willst, dass an allen Feldern die invalid sind, die jeweilige Fehlermeldung zu sehen ist?

Ich denke nicht dass das funktioniert.

Da Jeder Browser den Validationshinweis anders rendert, vermute ich auch, dass das nicht möglich ist, da sich dann ja unter Umständen viele Hinweise überlagern würden.

Du kannst mit ValidityState.patternMismatch un der dazugehörigen CSS Pseudoklasse :invalid arbeiten. Dabei gibt es nur die Schwierigkeit, dass die Pseudoklasse sofort und nicht erst bei Abschicken des Formulars angewendet wird.

Wenn du eine Saubere Lösung haben möchtest, die Alle falschen Felder beim Abschicken markiert und mit Fehlermeldungen versieht, kommst du um JavaScript nicht drumrum.

genau.

brina42 So geht's natürlich auch. Super, dass du deine eigene Methode gefunden hast.

Ich hätte das wahrscheinlich so umgesetzt:

const words = [ '5g', 'strahlung', '5g-strahlung', 'auswirkung', 'auswirkungen', 'gefahr', 'gefahren', 'risiken', 'gesundheit', 'gesundheitliche', 'risiko', 'massenexperiment', 'elektrosmog',];
const inputs = document.f1.v_45.value.trim().split(/[ ,]+/).map((input) => input.toLowerCase());
const hits = words.filter((word) => inputs.includes(word.toLowerCase()));
const hasAHit = hits.length > 0;
const message = hasAHit
  ? 'Ausgezeichnet, wir haben einige Videos für Sie gefunden. Sie können nun auf Weiter klicken, um sich Ihre Suchergebnisse anzuschauen.'
  : 'Leider konnten wir zu Ihrem Suchbegriff keine Videos finden oder Sie haben Ihre Suche nicht ausreichend eingeschränkt. Versuchen Sie es noch einmal.';

document.getElementById('infotext').innerHTML = message;

Sempervivum
Und hier kommen wir wieder in die Diskursion, wieweit wollen wir helfen.

Ich versuche immer den Gedankengang des Fragestellers nachzuvollziehen und den Weg so weit es möglich ist weiter zu verfolgen.
So dass man entweder nur kleine Tips geben muss (je nachdem welches Lever an Erfahrung der Fragesteller hat) oder die Lösung so schreiben kann, dass sie dem entspricht, was ohnehin schon da ist.

Das dass dann nicht die modernste / eleganteste / kompatibel für IE / mobile optimiert / best practice / barrierefreiste Lösung ist, nehm ich dabei in Kauf, denn ich bin der Meinung es sollte bei einem Problem geholfen und nicht eine völlig neue Lösung präsentiert werden.
zwischendurch kann man noch Tipps für
Aber du weißt ja, dass das immer wieder ein Balanceakt ist.

Du brings da beide Lösungsansätze durcheinander.

if (treffer = true) {}

So kannst du nicht das Objekt nach wahren Werten überprüfen.

Ein Objekt (egal was drin ist) ist immer truthy.

Versuch es so:

var treffer = false;

for (i = 0; i < wortliste.length; i++) {
  var wort = wortliste[i]

  for (j = 0; j < splittedEingabe.length; j++) {
      var eingabeTeil = splittedEingabe[j];
    if (eingabeTeil.toLowerCase() == wort) {
      treffer = true;
      break;
    }
  }
}

Dann überprüfe treffer.