Textarea Tricks

Ach, <textarea>. Wie viele Eigenheiten du besitzt. Hier ist eine Sammlung von neun Dingen, die du vielleicht mit Textareas machen möchtest. Viel Spaß.

1. Bild als Textarea-Hintergrund, verschwindet, wenn Text eingegeben wird.

Du kannst einem Textarea ein Hintergrundbild hinzufügen, wie jedem anderen Element auch. In diesem Fall ist das Bild eine freundliche Erinnerung, nett zu sein =). Wenn du ein Hintergrundbild hinzufügst, kann es aus irgendeinem Grund die Standardformatierung des Browsers für das Textarea unterbrechen. Der Standard-1px-solide-dunklere-Rand wird durch einen dickeren, abgeschrägten Rand ersetzt. Um den Standard des Browsers wiederherzustellen, kannst du den Rand einfach wieder normal erzwingen.

textarea {
  background: url(images/benice.png) center center no-repeat; /* This ruins default border */
  border: 1px solid #888; 
}

Dieses Hintergrundbild kann die Lesbarkeit des Textes beeinträchtigen, sobald der Text diesen Bereich erreicht. Hier ist ein jQuery-Code, der den Hintergrund entfernt, wenn das Textarea im Fokus ist, und ihn wieder hinzufügt, wenn das Textarea ohne Text verlassen wird.

$('textarea')
  .focus(function() { $(this).css("background", "none") })
  .blur(function() { if ($(this)[0].value == '') { $(this).css("background", "url(images/benice.png) center center no-repeat") } });

2. HTML5 Platzhaltertext

Es gibt ein neues Attribut als Teil von HTML5-Formularen namensplaceholder. Es zeigt verblassten grauen Text im Textarea (funktioniert auch für Texteingabefelder), der verschwindet, wenn das Textarea im Fokus ist oder einen Wert hat.

<textarea placeholder="Remember, be nice!" cols="30" rows="5"></textarea>

HTML5-Platzhaltertext funktioniert in Safari 5, Mobile Safari, Chrome 6 und der Firefox 4 Alpha.

3. Platzhaltertext, HTML5 mit jQuery-Fallback

Wir können leicht testen, ob ein bestimmtes Element ein bestimmtes Attribut unterstützt, indem wir es mit JavaScript testen.

function elementSupportsAttribute(element, attribute) {
  var test = document.createElement(element);
  if (attribute in test) {
    return true;
  } else {
    return false;
  }
};

Dann können wir Code schreiben, so dass, wenn der Browser das Platzhalterattribut unterstützt, wir es verwenden, und wenn nicht, simulieren wir das Verhalten mit jQuery.

if (!elementSupportsAttribute('textarea', 'placeholder')) {
  // Fallback for browsers that don't support HTML5 placeholder attribute
  $("#example-three")
    .data("originalText", $("#example-three").text())
    .css("color", "#999")
    .focus(function() {
        var $el = $(this);
        if (this.value == $el.data("originalText")) {
          this.value = "";
        }
    })
    .blur(function() {
      if (this.value == "") {
          this.value = $(this).data("originalText");
      }
    });
} else {
  // Browser does support HTML5 placeholder attribute, so use it.
  $("#example-three")
    .attr("placeholder", $("#example-three").text())
    .text("");
}

4. Den blauen Schein entfernen

Alle WebKit-Browser, Firefox 3.6 und Opera 10 umranden Textareas mit einem leuchtenden blauen Rand, wenn sie im Fokus sind. Du kannst ihn bei WebKit-Browsern wie folgt entfernen:

textarea {
  outline: none;
}

Du könntest ihn auch auf den :focus-Stil anwenden, aber es funktioniert so oder so. Ich habe noch keinen Weg gefunden, ihn von Firefox oder Opera zu entfernen, aber-moz-outline-stylewar ungefähr so weit, wie ich getestet habe.

ERINNERUNG: Der blaue Schein wird zu einem starken Standard und das Brechen dieses Standards ist typischerweise schlecht für deine Benutzer. Wenn du es tust, solltest du einen verdammt triftigen Grund dafür haben und einen ähnlich starken :focus-Stil.

5. Größenänderungsgriff entfernen

WebKit-Browser fügen am unteren rechten Rand von Textareas ein kleines UI-Element hinzu, das Benutzer zum Vergrößern und Verkleinern eines Textareas verwenden können. Wenn du das aus irgendeinem Grund entfernen möchtest, reicht CSS aus:

textarea {
  resize: none;
}

6. Größenänderungsgriff hinzufügen

jQuery UI bietet eine Resizable-Interaktion, die auf Textareas angewendet werden kann. Sie funktioniert in allen Browsern und überschreibt die native WebKit-Version, da diese Version alle Arten von schicken Funktionen hat (wie Callbacks und Animationen).

Um sie zu verwenden, lade jQuery und jQuery UI auf deiner Seite und auf der grundlegendsten Ebene rufst du sie so auf:

$("textarea").resizable();

7. Automatische Größenanpassung an den Inhalt

James Padolsey hat ein super nettes jQuery-Skript für automatisch größenveränderliche Textareas (Das war mal im Internet und mal nicht, also hier ist ein Backup.)

Hier ist ein weiteres von Louis Lazeris, das auch Links zu anderen Optionen enthält. Es funktioniert genau so, wie du es dir wahrscheinlich wünschst. Das Textarea beginnt mit einer normalen, angemessenen Größe. Während du mehr und mehr Inhalt eingibst, erweitert sich das Textarea, um all diesen Text aufzunehmen, anstatt eine Scrollleiste auszulösen, wie es der Standard ist.

Das Plugin hat eine Vielzahl von Optionen, aber im einfachsten Fall lädst du jQuery, die Plugin-Datei und rufst es so auf:

$('textarea').autoResize();

Ein weiterer Trick hier ist, gar kein <textarea> zu verwenden, sondern <div contenteditable>. Das wächst automatisch ohne ausgefallene JavaScript-Hilfe – außer dass es kein echtes Formularelement mehr ist, sodass du JavaScript benötigst, um den Wert zu extrahieren/zu senden.

8. Kein Umbruch

Um zu verhindern, dass Text normal in CSS umgebrochen wird, verwendest du#whatever { white-space: nowrap; }. Aber aus irgendeinem Grund funktioniert das nicht mit Textareas. Wenn du in Textareas tippen möchtest und stattdessen lieber keine Zeilenumbrüche haben möchtest, bis du Enter drückst (stattdessen wird eine horizontale Scrollleiste ausgelöst), musst du daswrap="off"Attribut verwenden.

<textarea wrap="off" cols="30" rows="5"></textarea>

9. Standardmäßige Scrollbalken in Internet Explorer entfernen

IE fügt standardmäßig eine vertikale Scrollleiste zu allen Textareas hinzu. Du kannst sie mitoverflow: hiddenausblenden, aber dann erhältst du keine Scrollbalken mehr, wenn sich der Text erweitert. Glücklicherweise funktioniert auto-overflow, um die Scrollleiste zu entfernen und sie trotzdem einzublenden, wenn sie benötigt wird.

textarea {
  overflow: auto;
}

Alle oben genannten Beispiele können hier eingesehen werden.