Wie kann man die Größenänderung des Elements <textarea> deaktivieren?
Webkit-based browsers such as Safari Chrome, has attached a new UI element to the bottom-right side of the text areas allowing users to resize the textarea size just by clicking it and moving the mouse.
It is not a secret that WebKit has a privilege over other browsers in page control and CSS features. One of these “hidden” features is the ability to regulate textarea resizing. Firefox has provided the same capacity in Firefox 4.
If for some reason you need to remove that resizable function of your textarea field, CSS3 gives the opportunity to control the textarea resizing.
In this article we are going to learn how to make the HTML <textarea> element have a fixed, unchangeable size.
To prevent a text field from being resized you can use the resize CSS property with its "none" value.
Add this simple piece of code to your textarea style:
textarea {
resize: none;
}Danach können Sie mit den Eigenschaften height und width eine feste Höhe und Breite für Ihr Textflächenelement definieren.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
.comment {
resize: none;
height: 100px;
width: 350px;
}
</style>
</head>
<body>
<h2>Textarea mit fester Höhe und Breite. </h2>
<form>
<textarea class="comment">Senden Sie Ihre Kommentare an den Autor.</textarea><br>
<input type="submit" name="submitInfo" value="Absenden">
</form>
</body>
</html>Oder Sie können die Größe für <textarea> angeben, indem Sie einfach die Attribute cols und rows setzen, die die feste Anzahl der Spalten und Zeilen definieren.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
.comment {
resize: none;
}
</style>
</head>
<body>
<form>
<textarea class="comment" rows="10" cols="40">Senden Sie Ihre Kommentare an den Autor.</textarea><br>
<input type="submit" name="submitInfo" value="Absenden">
</form>
</body>
</html>Sie können auch festlegen, dass die Benutzer die Größe des Elements <textarea> nur horizontal oder vertikal ändern können, indem Sie die Werte "vertical" oder "horizontal" der Eigenschaft resize verwenden.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
.vertical {
resize: vertical;
}
.horizontal {
resize: horizontal;
}
</style>
</head>
<body>
<h2>Ändern Sie die Größe des Textbereichs nur vertikal</h2>
<form>
<textarea class="vertical" rows="8" cols="50">Senden Sie Ihre Kommentare an den Autor.</textarea>
<h2>Ändern Sie die Größe des Textbereichs nur horizontal</h2>
<textarea class="horizontal" rows="8" cols="50">Senden Sie Ihre Kommentare an den Autor.</textarea>
</form>
</body>
</html>Die Größenänderung des Textbereichs ist ziemlich vorteilhaft, während Sie auf der Suche nach einer langen Nachricht sind. Die Größenänderung des Textbereichs ist sehr hilfreich, wenn Sie eine lange Nachricht posten möchten. Natürlich können Sie oft die Größenänderung von Textarea deaktivieren, um Ihr Design zu erhalten. Jedoch wird es empfohlen, die Größenänderung zu zulassen.