"textarea" html Feld mitwachsen?

<textarea class="form-control" name="Adresse">{if $pdf}{$values.Adresse|nl2br}{/if}</textarea>

Kann man dieses Feld so schreiben, dass es mitwächst. Das KEIN Scrollbalken kommt, sondern wie schon gesagt mitwächst

2 Antworten

14.12.2023, 09:55

<textarea class="form-control" name="Adresse" rows="auto">{if $pdf}{$values.Adresse|nl2br}{/if}</textarea>

Du kannst auch die Mindesthöhe des Textarea-Felds definieren. Das bedeutet, dass das Textarea-Feld immer mindestens so hoch sein wird, wie der angegebene Wert.

<textarea class="form-control" name="Adresse" rows="auto" min-height="50">{if $pdf}{$values.Adresse|nl2br}{/if}</textarea>

Woher ich das weiß:Hobby – Programmierer

maetin944

Beitragsersteller

14.12.2023, 10:01

aber so ein Scrollbalken kommt trozdem

JulianOnFire

14.12.2023, 10:20

@maetin944

wenn du den text auf der Webseite selbst eingeben willst, würde es so gehen ;

<!DOCTYPE html>
<html>
<head>
    <style>
        textarea.auto-expand {
            overflow-y: hidden; 
            resize: none; 
            min-height: 50px; 
        }
    </style>
</head>
<body>


<textarea class="auto-expand" id="expanding-textarea"></textarea>


<script>
    document.getElementById('expanding-textarea').addEventListener('input', function() {
        this.style.height = 'auto'; 
        this.style.height = (this.scrollHeight) + 'px'; 
    });
</script>


</body>
</html>

wenn du den text vorab mitgeben willst dann so:

<!DOCTYPE html>
<html>
<head>
    <style>
        textarea.auto-expand {
            overflow-y: hidden; 
            resize: none; 
            min-height: 50px; 
        }
    </style>
</head>
<body>


<textarea class="auto-expand" id="expanding-textarea">test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
</textarea>


<script>
    function adjustTextareaHeight(textarea) {
        textarea.style.height = 'auto';
        textarea.style.height = textarea.scrollHeight + 'px';
    }


    const textarea = document.getElementById('expanding-textarea');
    adjustTextareaHeight(textarea);


    textarea.addEventListener('input', function() {
        adjustTextareaHeight(this);
    });
</script>


</body>
</html>

maetin944

Beitragsersteller

14.12.2023, 10:37

@JulianOnFire

Danke

SirGeiler

22.03.2024, 10:03

Ich habe für diesen Zweck immer Autosize (stand-alone) verwendet.

Woher ich das weiß:Berufserfahrung – IT Autodidakt & DAU-Proofed als PC-Flittchen

Ähnliche Beiträge

Checkboxen die Pflicht sein soll?

man soll umbedigt eines der Checkboxen auswählen, Bei Bedarf oder Regelmäßig oder Nein.

<div class="col-xs-2">{if $pdf}<span class="span-checkbox{if isset($values.Medikamente_in_Schule_Bei_Bedarf)} span-checkbox-checked{/if}"></span>{else}<label class="checkbox-inline"><input type="checkbox" data-group="Medikamente_Schule" name="Medikamente_in_Schule_Bei_Bedarf" value="Ja">{/if} {language key="elf_Frage_11_Bei_Bedarf"}{if !$pdf}</label>{/if}</div>       

<div class="col-xs-2">{if $pdf}<span class="span-checkbox{if isset($values.Medikamente_in_Schule_Regelmaessig)} span-checkbox-checked{/if}"></span>{else}<label class="checkbox-inline"><input type="checkbox" data-group="Medikamente_Schule" name="Medikamente_in_Schule_Regelmaessig" value="Ja">{/if} {language key="elf_Frage_11_Regelmaeßig"}{if !$pdf}</label>{/if}</div>

<div class="col-xs-2">{if $pdf}<span class="span-checkbox{if isset($values.Medikamente_in_Schule_Nein)} span-checkbox-checked{/if}"></span>{else}<label class="checkbox-inline"><input type="checkbox" data-group="Medikamente_Schule" name="Medikamente_in_Schule_Nein" value="Ja">{/if} {language key="elf_Frage_11_Nein"}{if !$pdf}</label>{/if}</div>

...zum Beitrag

Warum wird meine Seite nicht aktualisiert?

Hallo,

ich wollte machen, dass, wenn ich in Python etwas sage, ein Div im HTML eingefügt wird. Das funktioniert auch ganz gut, aber, da ich kein Websockets verwende, muss ich die Seite immer manuell aktualisieren, wenn der Div eingefügt wurde, damit es ihn auch anzeigt. Diese Funktion wollte ich automatisieren, doch es funktioniert nicht, wieso?

// FLASK
function detectWakeWord() {
    var detectedWord = 'luna'; 
    
    if (detectedWord === 'luna') {
        if (!document.getElementById('luna_wake_word')) {
            var div = document.createElement('div');
            div.id = 'luna_wake_word';
            document.body.appendChild(div);
            showWakeWord();
            
            setTimeout(function() { 
                location.reload(); 
            }, 1000); 
        }
    }
}

detectWakeWord();

Freundliche Grüsse

...zum Beitrag

HTML Console Tabelleninhalt Eingabe über Console ändern?

Hallo,

ich habe eine lange HTML liste bei der die Preise manuell in HTML in einer Tabelle geändert werden müssen.

Ist es möglich über die Inspect Console von Chrome die Inhalte der Tabelle in einem Batch zu ändern?

So sehen die Felder aus die in der Tabelle geändert werden sollen:

(gespeichert werden dann alle Werte dann mit der Enter Taste in einem der Felder)

Die Tabelle hat folgenden Code:

<td id="LAYOUT_DONNEES_PRIX-2-16-cell" class="z_c1_bpslay2stdData" style="text-align: right;"><input name="LAYOUT_DONNEES_PRIX-2-16" size="4 " maxlength="70 " class="z_c1_bpslay2Edf" style="text-align: right;" value="0,00"></td>

Die neuen Zeilen hätten dann folgende ID:

id="LAYOUT_DONNEES_PRIX-2-16-cell"

id="LAYOUT_DONNEES_PRIX-3-16-cell"

id="LAYOUT_DONNEES_PRIX-4-16-cell"

und geändert werden müsste jeweils nur die Value:

value="0,00"

Falls ihr mir sagen könnt, was Ich in der Console eingeben muss um einen Inhalt zu ändern wäre mir sehr geholfen.

Ich bin ein absoluter noob in diesem Gebiet und einfach

change <id="LAYOUT_DONNEES_PRIX-2-16-cell" value="1,00">

eingeben funktioniert leider nicht :D

Ich hoffe ihr habt verstanden was ich brauche :)

Vielen Dank und viele Grüße

Jens

...zum Beitrag

HTML Textarea nicht ziehbar?

Also ich habe mir etwas mit einer Textarea gebaut in HTML, nur man kann unten rechts das Feld vergrößern und verkleinern. Wie kann ich das Deaktivieren?

...zum Beitrag

javascript api probleme?

Hallo,

guckt euch mal meinen Code an.

JAVASCRIPT:

// INPUT
const login = document.getElementById("loginInput");
const password = document.getElementById("passwordInput");
const button = document.getElementById("sendButton");


// FETCH
const url = "https://crudcrud.com/api/4b3acc467d8c47d8a608bb9820171935/todos"



const dataRender = (array) => {
  if (array === undefined) {
    console.log("Loading results...");
  } else {
    let dataList = array.map((item) => {
      return `
      <div class="users">
        <p>${item.login}</p>
        <button onclick="deleteRequest(${item.id})">Delete</button>
        </div>
        `;
    });
    const getHtml = document.getElementById("userTable");
    getHtml.innerHTML = dataList.join("");
  }
};


const fetchData = async () => {
  try {
    const response = await fetch(url);
    const data = await response.json();
    dataRender(data);
  } catch (error) {
    console.error(error);
  }
};



fetchData();


const postRequest = async () => {
  const data = {
    login: login.value,
    password: password.value,
    isLogin: false,
  };


  try {
    const response = await fetch(url, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
    });


    const results = await response.json();
    console.log(results.message);
  } catch (error) {
    console.error(error);
  }


};


button.addEventListener("click", postRequest);


const deleteRequest = async (id) => {
  try {
    const response = await fetch(`${url}/${id}`, {
      method: "DELETE",
      headers: {
        "Content-Type": "application/json",
      }
    })
    const results = await response.json()
    console.log(results.message);
  }
  catch (error) {
    console.error(error);
  }
}

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CRUD</title>
  <script  defer src="./script.js"></script>
</head>
<body>
  <form>
    <input id="loginInput" type="text" placeholder="Login">    
    <input id="passwordInput" type="password" placeholder="Password">    
    <button onclick="" id="sendButton">Send</button>


    <div id="userTable">
      
    </div>
  </form>
</body>
</html>

Mein Ziel:

Wenn ihr auf das button "Send" drückt, dann erscheint ja der value von dem input "login" auf HTML (innerHTML heisst das glaube ich). Und zusammen mit dem value erscheint auch ein anderer Button namens "Delete". Mein Ziel ist es, dass wenn ich auf "Delete" drücke, dann sollte das item aus Backend-Server und aus HTML gelöscht werden. Aber das klappt bei mir die ganze Zeit nicht. Einfacher ist es wenn ihr meinen Code einfügt und selber mal den Code testet, dann werdet ihr verstehen, was ich machen will.

Bitte helft mir! Ich sitze schon wirklich lange dranrum und ohne Erfolg!

Dankeschön im Voraus!

MfG

MrOsmo

...zum Beitrag

HTML und CSS übungen mit Lösung 2023 (aktuell)?

Hallo zusammen ich suche sowas wie PDFs oder eBooks und seriöse Webseiten die sowas anbieten. Möglichst Anfänger freundlich.

Danke für eure Antworten

P.S. bitte keine Amazon-Links, bitte wenn dann alternativ die ISBN oder Titel und Autor.

...zum Beitrag

Action URL in einem PHP-Formular über einen Schalter in Echtzeit dynamisch ändern, wie?

Also Folgendes: ich hab hier ein PHP-Formular mit einem Eingabefeld und einem Submit Button, dass die eingegebenen Werte an eine bestimmte URL sendet. (Das ist erstmal simpel) Ich habe auch herausgefunden, wie man die URL z.b mit einer Zahlenfunktion variieren kann. Auch das geht relativ leicht. Was hingegen scheinbar weniger einfach ist: Ich würde das Action Attribut, also die URL, wo die Eingaben hingesendet werden nun gerne über einen HTML-Schalter z.b Checkbox dynamisch & in Echtzeit ändern. z.b Checkbox aktiv = Daten werden an URL2 gesendet, Checkbox nicht aktiv = Daten werden an URL1 gesendet. Oder es soll einfach ein URL-Zusatz hinzugefügt werden, je nachdem ob die Checkbox aktiv ist oder nicht. Meine jetzt ganz blöde Frage: Wie oder mit welchem Ansatz kann das funktionieren? Ich habe da jetzt bereits XX Stunden rumprobiert: Normale Variablen mit Conditions definieren, Sessions starten, der Versuch ein Cookie zu setzen, dass beim Ein und Ausschalten der Checkbox gesetzt bzw. gelöscht werden soll (klappt nicht). Mit JS Codeschnipseln herumprobiert. Nichts davon scheint zu funktionieren bzw. es wird einfach immer der Zustand "checkbox unchecked" an URL1 gesendet.

Hat irgendeiner mit Ahnung ne Idee wieso das nicht funktioniert und ob es einen lösbaren Ansatz für dieses Problem gibt?

...zum Beitrag

Bauksasten vs selber machen?

Was sind die besten Vorteile bei Webseiten wenn man es selber macht mit Html css und js im Gegensatz zu Baukastensystemen? Also ja bei den meisten Baukastensystemen kann man nicht alles umsetzen was man will, aber bei Webflow schon. Da kann man alles machen, was man sich vorstellt. Also wäre die eigentliche Frage, was sind die Vorteile vom Programmieren mit Html css und js, selber hosten und alles selber zu machen zu Webflow? Weil es vielleicht günstiger ist? (Zu erwähnen ist, dass ich nur einfache Webseiten meine, also keine Login System Webseiten keine großen, sondern einfach für Unternehmenswebseiten undso, also Sachen für die man nur einfaches Html css und js braucht.)

...zum Beitrag

Wieso versendet dieser PHP Code die Mail nicht?

Gestern ging es noch.....

Es kommt zwar die Meldung das die Mail verschickt wurde jedoch wurde sie nicht verschickt

<?php
if(isset($_POST['submit'])) {
  $to = $_POST['to'];
  $subject = $_POST['subject'];
  $message = $_POST['message'];
  $header = "From : <//email-adresse-vom-sender>";
  if(mail($to, $subject, $message, $header)) {
    echo "Email sent successfully";
  } else {
    echo "Email failled";
  }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="container">
  <div class="form_container">
    <h3>Send Email with PHP</h3>
    <form method="post">
      <p>
        <label for="to">To:</label>
        <input type="text" name="to" placeholder="To.."/>
      </p>
      <p>
        <label for="subject">Subject:</label>
        <input type="text" name="subject" placeholder="Subject.."/>
      </p>
      <p>
        <label for="name">Message:</label>
        <input type="text" name="message" placeholder="Message.."/>
      </p>
      <button name="submit" name='submit'>Send</button>
    </form>
    </div>
    </div>
  
</body>
</html>

...zum Beitrag

Html Buttons mit Tastatur?

Hallo ich habe ein Input Feld mit dem Type Text und daneben eines mit dem Type Button und eigentlich funktioniert auch alles aber wenn ich im Textfeld bin und enter drücke soll das selbe passieren wie wenn ich auf den Button drücke aber stattdessen wird die Seite neu geladen?

...zum Beitrag

Wie kann man in einer HTML-Website den Übersetzer ausschalten?

Ich habe eine eigene Website mit HTML, CSS und JavaScript programmiert und ich habe ein paar englische Wörter, die ich nicht Übersetzen möchte, sondern in Originalform stehenlassen möchte. Wie kann man das programmieren.

...zum Beitrag

Css+html Navbar verschoben?

Hallo :)

Ich baue mir gerade eine Website auf und habe ein Burger-menü in Css und Html angelegt, allerdings ist der Navigationsbereich nicht unter dem Icon sondern verschoben darüber, wodurch das Menü nicht gut aufklappbar ist.

In Css habe ich bereits versucht durch nav{...} den Bereich von Html anzupassen (auch mit dem Boxenmodell) aber ich kenne auch noch keinen Befehl der das verschiebt, oder es funktioniert einfach nicht.

Ich wäre auf jeden Fall sehr dankbar für Hilfe!

LG Sabine

...zum Beitrag

Html Passwort?

Guten Tag ich bin dabei eine seite zu programmieren auf welcher man einen key eingeben muss und dann weiter geleitet wird jedoch stoße ich hirbei auf probleme und zwar ist das passwort schon automatisch eingegeben und man kann eingeben was man will man wird trotzdem weitergeleitet wie kann ich das beheben hier der code :

<!DOCTYPE html>
<html>
<body>
<h1>Key</h1>
<form action="/action_page.php">
 <label for="key">Key:</label>
 <input type="password" id="key" name="key" value="1234"><br><br>
 <input type="submit" value="Submit">
</form>
<p>Click the "Submit" button and the form-data will be sent to a page on the 
server called "hier kommt noch ein link".</p>
</body>
</html>

...zum Beitrag

Javascript Ausgabe erweitern?

Hallo,

wie kann man die Ausgabe in einem textarea feld erweitern? Ich habe unter dem Textfeld verschiedene Buttons mit verschiedenen values. Wenn ich einen Button drücke, dann soll er im Textarea-feld angezeigt werden. Wie mache ich aber nun, dass nicht nur ein value angezeigt wird, sondern so viel, wie buttons gedrückt werden. Das ist mein bisheriger Code:

Html

<textarea name="displa" id="display" cols="40" rows="7"></textarea>
    <button value="1">1</button>
    <button value="2">2</button>
    <button value="3">3</button>
    <button value="4">4</button>
    <button value="5">5</button>
    <button value="6">6</button>
    <button value="7">7</button>
    <button value="8">8</button>
    <button value="9">9</button>
    <button value="+">+</button>
    <button value="-">-</button>
    <button value="*">*</button>
    <button value="/">/</button>

Javascript

$("button").click(function() {
    var fired_button = $(this).val();
    $('#display').value = fired_button;
    break;
    return;
});

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen