Wie entferne ich automatisch Punkte und Leerzeichen aus einem HTML-Eingabefeld mit eigenem JavaScript?

Question

Wie entferne ich automatisch Punkte und Leerzeichen aus einem HTML-Eingabefeld mit eigenem JavaScript?

Antwort

Verwandte Fragen

Wie entferne ich automatisch Punkte und Leerzeichen aus einem HTML-Eingabefeld?

Wie erstellt man ein Input-Element in einer HTML-Tabelle mit JS?

Wie fügt man einem <li> Tag innerhalb eines <ul> mit der Klasse tabs mit JavaScript die Klasse col-lg-3 hinzu?

Wie fügt man <li>-Tag innerhalb eines <ul> mit Klassen tabs primary nav-tabs drupal-tabs mit JavaScript die Klasse col-lg-3 hinzu?

Wie fügt man mit JS einem <li>-Tag eines <ul> die Klassen col-lg-3, col-md-3, col-sm-6 und col-xs-6 hinzu?

Wie kann ich mit JavaScript in HTML einen Tooltip-Text bei onmouseover anzeigen?

Wie kann ich mit JavaScript den Inhalt eines HTML-Forms beim Submit anzeigen lassen?

Wie ändere ich die Ausrichtung eines Textes in einer HTML-Textarea mit JavaScript?

Wie kann man in WordPress ein Bild per Klick des Nutzers umdrehen?

Was bedeutet viewpoint height = 100 in HTML?

Accepted Answer

Um automatisch Punkte und Leerzeichen aus einem HTML-Eingabefeld zu entfernen, kannst du ein kurzes JavaScript verwenden, das auf das `input`-Event reagiert. Hier ein Beispiel: ```html <input type="text" id="meinFeld" placeholder="Eingabe ohne Punkte und Leerzeichen"> > document.getElementById('meinFeld').addEventListener('input', function(e) { // Entfernt alle Punkte und Leerzeichen this.value = this.value.replace(/[.\s]/g, ''); }); </script> ``` **Erklärung:** - Das Skript hört auf das `input`-Event des Feldes. - Mit `replace(/[.\s]/g, '')` werden alle Punkte (`.`) und Leerzeichen (`\s`) im aktuellen Wert entfernt. Das funktioniert rein clientseitig und benötigt keine weiteren Bibliotheken.

Accepted Answer

Um automatisch Punkte und Leerzeichen aus einem HTML-Eingabefeld zu entfernen, kannst du JavaScript verwenden. Das folgende Beispiel zeigt, wie du das beim Eintippen (oninput) erreichen kannst: ```ht... [mehr]

Accepted Answer

Um automatisch Punkte und Leerzeichen aus einem HTML-Eingabefeld zu entfernen, kannst du JavaScript verwenden. Das folgende Beispiel zeigt, wie du das beim Eintippen (oninput) erreichen kannst: ```html <input type="text" id="meinFeld" oninput="this.value = this.value.replace(/[. ]/g, '')"> ``` **Erklärung:** - `oninput` wird bei jeder Eingabe ausgelöst. - `replace(/[. ]/g, '')` entfernt alle Punkte (`.`) und Leerzeichen (` `) aus dem aktuellen Wert. **Hinweis:** Du kannst das Muster in der `replace`-Funktion anpassen, falls du noch weitere Zeichen entfernen möchtest. Weitere Infos zu [HTML input](https://developer.mozilla.org/de/docs/Web/HTML/Element/input) und [JavaScript replace](https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/String/replace) findest du auf MDN.

Accepted Answer

Um ein Input-Element in einer HTML-Tabelle mit JavaScript zu erstellen, kannst du die folgenden Schritte befolgen: 1. Erstelle eine HTML-Tabelle. 2. Verwende JavaScript, um ein neues `<input>`-... [mehr]

Accepted Answer

Um ein Input-Element in einer HTML-Tabelle mit JavaScript zu erstellen, kannst du die folgenden Schritte befolgen: 1. Erstelle eine HTML-Tabelle. 2. Verwende JavaScript, um ein neues `<input>`-Element zu erstellen und es in eine Zelle der Tabelle einzufügen. Hier ist ein einfaches Beispiel: ```html <!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Input in Tabelle</title> </head> <body> <table id="meineTabelle" border="1"> <tr> <th>Name</th> <th>Alter</th> </tr> </table> <button onclick="hinzufuegen()">Zeile hinzufügen</button> <script> function hinzufuegen() { // Tabelle und neue Zeile erstellen var tabelle = document.getElementById("meineTabelle"); var neueZeile = tabelle.insertRow(-1); // Fügt eine neue Zeile am Ende der Tabelle hinzu // Zelle für den Namen var zelle1 = neueZeile.insertCell(0); var inputName = document.createElement("input"); inputName.type = "text"; inputName.placeholder = "Name eingeben"; zelle1.appendChild(inputName); // Zelle für das Alter var zelle2 = neueZeile.insertCell(1); var inputAlter = document.createElement("input"); inputAlter.type = "number"; inputAlter.placeholder = "Alter eingeben"; zelle2.appendChild(inputAlter); } </script> </body> </html> ``` In diesem Beispiel wird eine Tabelle mit zwei Spalten (Name und Alter) erstellt. Wenn du auf den Button klickst, wird eine neue Zeile mit zwei Input-Feldern hinzugefügt. Das erste Input-Feld ist für den Namen und das zweite für das Alter.

Accepted Answer

Um einem `<li>`-Tag innerhalb eines `<ul>` mit der Klasse `tabs` die Klasse `col-lg-3` hinzuzufügen, kannst du JavaScript verwenden. Hier ist ein Beispiel, wie du das machen kannst:... [mehr]

Accepted Answer

Um einem `<li>`-Tag innerhalb eines `<ul>` mit der Klasse `tabs` die Klasse `col-lg-3` hinzuzufügen, kannst du JavaScript verwenden. Hier ist ein Beispiel, wie du das machen kannst: ```javascript // Wähle das <ul> mit der Klasse 'tabs' const tabsList = document.querySelector('ul.tabs'); // Wähle das <li>, dem du die Klasse hinzufügen möchtest const listItem = tabsList.querySelector('li'); // Hier wird das erste <li> ausgewählt // Füge die Klasse 'col-lg-3' hinzu if (listItem) { listItem.classList.add('col-lg-3'); } ``` In diesem Beispiel wird das erste `<li>`-Element innerhalb des `<ul>` mit der Klasse `tabs` ausgewählt und die Klasse `col-lg-3` hinzugefügt. Du kannst die Auswahl des `<li>`-Elements anpassen, je nachdem, welches Element du ansprechen möchtest.

Accepted Answer

Um mit JavaScript `<li>`-Tags innerhalb eines `<ul>`-Elements, das die Klassen `tabs primary nav-tabs drupal-tabs` hat, die Klasse `col-lg-3` hinzuzufügen, kannst du den folgenden Cod... [mehr]

Accepted Answer

Um mit JavaScript `<li>`-Tags innerhalb eines `<ul>`-Elements, das die Klassen `tabs primary nav-tabs drupal-tabs` hat, die Klasse `col-lg-3` hinzuzufügen, kannst du den folgenden Code verwenden: ```javascript // Wähle das <ul> Element mit den spezifischen Klassen const ulElement = document.querySelector('ul.tabs.primary.nav-tabs.drupal-tabs'); // Überprüfe, ob das Element existiert if (ulElement) { // Erstelle ein neues <li> Element const liElement = document.createElement('li'); // Füge die Klasse col-lg-3 hinzu liElement.classList.add('col-lg-3'); // Optional: Füge Text oder andere Inhalte zum <li> hinzu liElement.textContent = 'Neues Tab'; // Beispieltext // Füge das <li> Element zum <ul> hinzu ulElement.appendChild(liElement); } ``` Dieser Code sucht nach dem `<ul>`-Element mit den angegebenen Klassen, erstellt ein neues `<li>`-Element, fügt die Klasse `col-lg-3` hinzu und hängt es schließlich an das `<ul>`-Element an.

Accepted Answer

Um einem `<li>`-Tag innerhalb eines `<ul>` mit JavaScript die Klassen `col-lg-3`, `col-md-3`, `col-sm-6` und `col-xs-6` hinzuzufügen, kannst du den folgenden Code verwenden: ```javas... [mehr]

Accepted Answer

Um einem `<li>`-Tag innerhalb eines `<ul>` mit JavaScript die Klassen `col-lg-3`, `col-md-3`, `col-sm-6` und `col-xs-6` hinzuzufügen, kannst du den folgenden Code verwenden: ```javascript // Wähle das <li>-Element aus, das du bearbeiten möchtest var liElement = document.querySelector('ul li'); // Hier wird das erste <li> innerhalb eines <ul> ausgewählt // Füge die Klassen hinzu liElement.classList.add('col-lg-3', 'col-md-3', 'col-sm-6', 'col-xs-6'); ``` Dieser Code sucht das erste `<li>`-Element innerhalb eines `<ul>` und fügt die angegebenen Klassen hinzu. Stelle sicher, dass du das richtige `<li>`-Element auswählst, falls es mehrere gibt.

Accepted Answer

Um einen Tooltip-Text bei einem `onmouseover`-Ereignis in HTML mit JavaScript anzuzeigen, kannst du die folgenden Schritte befolgen: 1. Erstelle ein HTML-Element, das den Tooltip anzeigen soll. 2. Ve... [mehr]

Accepted Answer

Um einen Tooltip-Text bei einem `onmouseover`-Ereignis in HTML mit JavaScript anzuzeigen, kannst du die folgenden Schritte befolgen: 1. Erstelle ein HTML-Element, das den Tooltip anzeigen soll. 2. Verwende CSS, um das Tooltip-Element zu stylen und standardmäßig auszublenden. 3. Füge JavaScript hinzu, um den Tooltip bei `onmouseover` anzuzeigen und bei `onmouseout` auszublenden. Hier ist ein einfaches Beispiel: ```html <!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tooltip Beispiel</title> <style> .tooltip { display: none; position: absolute; background-color: #333; color: #fff; padding: 5px; border-radius: 5px; z-index: 1000; } </style> </head> <body> <div id="myElement" style="display:inline-block; margin: 50px; cursor: pointer;"> Über mich fahren </div> <div id="tooltip" class="tooltip">Das ist ein Tooltip!</div> <script> const myElement = document.getElementById('myElement'); const tooltip = document.getElementById('tooltip'); myElement.addEventListener('mouseover', function(event) { tooltip.style.display = 'block'; tooltip.style.left = event.pageX + 'px'; tooltip.style.top = event.pageY + 'px'; }); myElement.addEventListener('mouseout', function() { tooltip.style.display = 'none'; }); </script> </body> </html> ``` In diesem Beispiel wird der Tooltip angezeigt, wenn der Benutzer mit der Maus über das Element fährt, und er wird ausgeblendet, wenn die Maus das Element verlässt. Der Tooltip wird an der Position des Mauszeigers angezeigt.

Accepted Answer

Um mit JavaScript anzuzeigen, welcher Inhalt mit einem Submit in einer HTML-Form gepostet wird, kannst du ein Event-Listener für das `submit`-Ereignis der Form verwenden. Hier ist ein einfaches B... [mehr]

Accepted Answer

Um mit JavaScript anzuzeigen, welcher Inhalt mit einem Submit in einer HTML-Form gepostet wird, kannst du ein Event-Listener für das `submit`-Ereignis der Form verwenden. Hier ist ein einfaches Beispiel, wie du das umsetzen kannst: ```html <!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta name="" content="width=device-width, initial-scale=1.0"> <title>Formular anzeigen</title> </head> <body> <form id="myForm"> <label for="name">Name:</label> <input type="text" id="name" name="name" required> <br> <label for="email">E-Mail:</label> <input type="email" id="email" name="email" required> <br> <button type="submit">Absenden</button> </form> <div id="output"></div> <script> document.getElementById('myForm').addEventListener('submit', function(event) { event.preventDefault(); // Verhindert das Standard-Submit-Verhalten const formData = new FormData(this); let output = ''; formData.forEach((value, key) => { output += `${key}: ${value}<br>`; }); document.getElementById('output').innerHTML = output; }); </script> </body> </html> ``` In diesem Beispiel wird beim Absenden des Formulars das Standardverhalten (das Neuladen der Seite) mit `event.preventDefault()` verhindert. Anschließend wird der Inhalt des Formulars mit `FormData` gesammelt und in einem `div`-Element angezeigt.

Accepted Answer

Um die Ausrichtung eines Textes in einer HTML-Textarea durch JavaScript zu verändern, kannst du die CSS-Eigenschaft `text-align` verwenden. Allerdings unterstützt die `<textarea>`-Elem... [mehr]

Accepted Answer

Um die Ausrichtung eines Textes in einer HTML-Textarea durch JavaScript zu verändern, kannst du die CSS-Eigenschaft `text-align` verwenden. Allerdings unterstützt die `<textarea>`-Elemente keine direkte Textausrichtung über CSS. Stattdessen kannst du eine `<div>` oder `<p>` mit `contenteditable="true"` verwenden, um die Textausrichtung zu steuern. Hier ist ein Beispiel, wie du das umsetzen kannst: ```html <!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Textausrichtung ändern</title> <style> .editable { width: 300px; height: 150px; border: 1px solid #ccc; padding: 10px; overflow: auto; } </style> </head> <body> <div class="editable" contenteditable="true"></div> <button onclick="setTextAlign('left')">Links</button> <button onclick="setTextAlign('center')">Zentriert</button> <button onclick="setTextAlign('right')">Rechts</button> <script> function setTextAlign(alignment) { document.querySelector('.editable').style.textAlign = alignment; } </script> </body> </html> ``` In diesem Beispiel wird ein `div` verwendet, das bearbeitbar ist. Mit den Schaltflächen kannst du die Textausrichtung auf links, zentriert oder rechts ändern.

Accepted Answer

Um in WordPress ein Bild durch einen Klick eines Nutzers umzudrehen (z.B. horizontal oder vertikal spiegeln), kannst du JavaScript und etwas CSS verwenden. Hier ist eine einfache Möglichkeit, das... [mehr]

Accepted Answer

Um in WordPress ein Bild durch einen Klick eines Nutzers umzudrehen (z.B. horizontal oder vertikal spiegeln), kannst du JavaScript und etwas CSS verwenden. Hier ist eine einfache Möglichkeit, das umzusetzen: **1. Bild in einen Beitrag oder eine Seite einfügen** Füge das Bild wie gewohnt in deinen Beitrag oder deine Seite ein. Gib dem Bild eine eindeutige CSS-Klasse oder ID, z.B. `class="drehbild"`. **2. JavaScript und CSS hinzufügen** Füge folgenden Code in den Customizer unter „Zusätzliches CSS/JS“ ein oder verwende ein Plugin wie „Simple Custom CSS and JS“: ```html <style> .drehbild { transition: transform 0.3s; cursor: pointer; } .drehbild.gespiegelt { transform: scaleX(-1); /* Horizontal spiegeln */ } </style> <script> document.addEventListener('DOMContentLoaded', function() { var bild = document.querySelector('.drehbild'); if(bild) { bild.addEventListener('click', function() { bild.classList.toggle('gespiegelt'); }); } }); </script> ``` **3. Funktionsweise** - Das Bild erhält beim Klick die Klasse `gespiegelt`. - Mit CSS wird das Bild dann horizontal gespiegelt. - Ein erneuter Klick entfernt die Spiegelung wieder. **Hinweise:** - Für vertikales Spiegeln ändere `scaleX(-1)` zu `scaleY(-1)`. - Wenn du mehrere Bilder so umdrehen möchtest, passe das Skript entsprechend an (z.B. mit `querySelectorAll` und einer Schleife). **Weitere Infos:** - [WordPress Customizer](https://wordpress.org/support/article/appearance-customize-screen/) - [Simple Custom CSS and JS Plugin](https://de.wordpress.org/plugins/custom-css-js/) So kannst du das gewünschte Verhalten einfach umsetzen, ohne ein spezielles Plugin installieren zu müssen.

Accepted Answer

Der Begriff „viewpoint high = 100“ ist vermutlich ein Tippfehler oder eine Verwechslung. Gemeint ist sehr wahrscheinlich **`vh`** als Einheit in CSS, also **`100vh`**. **`vh`** steht f&uu... [mehr]

Accepted Answer

Der Begriff „viewpoint high = 100“ ist vermutlich ein Tippfehler oder eine Verwechslung. Gemeint ist sehr wahrscheinlich **`vh`** als Einheit in CSS, also **`100vh`**. **`vh`** steht für „viewport height“ und ist eine relative Maßeinheit in CSS. **`100vh`** bedeutet: 100% der Höhe des sichtbaren Browserfensters (des Viewports). **Beispiel:** ```css body { height: 100vh; } ``` Das sorgt dafür, dass das `<body>`-Element genau so hoch ist wie das Browserfenster – unabhängig von der Bildschirmgröße. **Zusammengefasst:** Mit `height: 100vh;` wird ein Element so hoch wie der sichtbare Bereich des Browsers. Mehr Infos: [MDN Web Docs – vh](https://developer.mozilla.org/de/docs/Web/CSS/length#viewport-relative-lengths) Falls du etwas anderes gemeint hast, bitte die Frage präzisieren.