In HTML können Benutzer normalerweise die Größe eines Textbereichs ändern, indem sie an der unteren rechten Ecke ziehen. Manchmal möchten wir jedoch dieses manuelle Ziehverhalten deaktivieren, um die Größe des Textfelds festzulegen. Um dies zu erreichen, können Sie die CSS-Resize-Eigenschaft verwenden.
Die spezifischen Schritte sind wie folgt:
Suchen Sie das Textbereichselement (textarea), das in der HTML-Datei deaktiviert werden muss.
Fügen Sie dem Textfeldelement CSS-Stile hinzu und setzen Sie das Größenänderungsattribut auf „Keine“. Dadurch wird verhindert, dass der Benutzer durch Ziehen die Größe des Textfelds ändert.
Hier ist ein einfaches Beispiel:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dokument</title>
<Stil>
Textbereich {
resize: none; /* Benutzer daran hindern, manuell zu ziehen und die Größe zu ändern */
}
</style>
</head>
<Körper>
<textarea name="" id="" cols="30" rows="10">Dies ist der Inhalt des Textbereichs</textarea>
</body>
</html> Im obigen Beispiel legen wir resize: none; für textarea -Element fest und verhindern so, dass Benutzer die Größe durch Ziehen ändern.
Im obigen Beispiel legen wir den Stil „resize: none;“ für das Textarea-Element fest und verhindern so, dass Benutzer die Größe durch Ziehen ändern.
Beachten Sie, dass dieser Ansatz zwar in den meisten modernen Browsern effektiv funktioniert, es aber am besten ist, ihn vor der tatsächlichen Bereitstellung gründlich zu testen, um die Kompatibilität sicherzustellen. Darüber hinaus ist das Größenänderungsattribut eine CSS3-Funktion und wird daher in einigen älteren Browsern möglicherweise nicht unterstützt. Wenn Sie diese Browser unterstützen müssen, müssen Sie möglicherweise andere Methoden in Betracht ziehen oder eine Downgrade-Option bereitstellen.
Damit ist dieser Artikel über das Festlegen von HTML-Textfeldern, um Benutzern das manuelle Ziehen zu verbieten, abgeschlossen. Weitere Informationen zu HTML, das Benutzern das manuelle Ziehen verbietet, finden Sie in den vorherigen Artikeln auf downcodes.com. Ich hoffe, Sie unterstützen uns weiter downcodes.com in Zukunft mehr!