Texteingabefelder

In einem Texteingabefeld wird ein String als Wert und ein String als Text gespeichert. Der Wert ist immer ein gültiger String, während der Text ein beliebiger String sein kann, der in den Editor eingegeben wird.

Textfeld

Ein Block mit dem Label „text input:“ und einem Texteingabefeld, das auf „default text“ festgelegt ist.

Texteingabefeld mit geöffnetem Editor

Derselbe Block mit dem Feld, das bearbeitet wird.

Texteingabefeld für minimierten Block

Derselbe Block nach dem Minimieren. Es hat das Label „text input: default text“ und einen gezackten rechten Rand, um anzuzeigen, dass es minimiert ist.

Erstellung

JSON

{
  "type": "example_textinput",
  "message0": "text input: %1",
  "args0": [
    {
      "type": "field_input",
      "name": "FIELDNAME",
      "text": "default text",
      "spellcheck": false
    }
  ]
}

JavaScript

Blockly.Blocks['example_textinput'] = {
  init: function() {
    this.appendDummyInput()
        .appendField("text input:")
        .appendField(new Blockly.FieldTextInput('default text'),
            'FIELDNAME');
  }
};

Der Konstruktor für die Texteingabe nimmt einen optionalen Wert und einen optionalen Validator an. Der Wert muss in einen String umgewandelt werden. Wenn der Wert null oder undefined ist, wird ein leerer String verwendet.

In der JSON-Definition können Sie auch die Option Rechtschreibprüfung festlegen.

Serialisierung und XML

JSON

Das JSON für ein Textfeld sieht so aus:

{
  "fields": {
    "FIELDNAME": "text"
  }
}

Dabei ist FIELDNAME ein String, der auf ein Texteingabefeld verweist, und „value“ ist der Wert, der auf das Feld angewendet werden soll. Für den Wert gelten dieselben Regeln wie für den Konstruktorwert.

XML

Die XML-Datei für ein Textfeld sieht so aus:

<field name="FIELDNAME">text</field>

Das name-Attribut des Felds enthält einen String, der auf ein Texteingabefeld verweist. Der innere Text ist der Wert, der auf das Feld angewendet werden soll. Für den inneren Text gelten dieselben Regeln wie für den Konstruktorwert.

Anpassung

Rechtschreibprüfung

Mit der Funktion setSpellcheck können Sie festlegen, ob der Eingabetext des Felds automatisch korrigiert werden soll.

Texteingabefelder mit und ohne Rechtschreibprüfung

Ein animiertes GIF mit zwei Blöcken mit Texteingabefeldern. Im ersten Block ist die Rechtschreibprüfung aktiviert und falsch geschriebene Wörter werden mit einer roten gewellten Linie unterstrichen. Im zweiten Block ist die Rechtschreibprüfung deaktiviert und falsch geschriebene Wörter werden nicht unterstrichen.

Die Rechtschreibprüfung ist standardmäßig aktiviert.

Das gilt für einzelne Felder. Wenn Sie alle Felder ändern möchten, ändern Sie die Property Blockly.FieldTextInput.prototype.spellcheck_.

Validierungstool für Texteingaben erstellen

Der Wert eines Textfelds ist ein String. Alle Validatoren müssen also einen String akzeptieren und einen String, null oder undefined zurückgeben.

Hier ein Beispiel für einen Validator, der alle Zeichen „a“ aus dem String entfernt:

function(newValue) {
  return newValue.replace(/a/g, '');
}

Ein animiertes GIF, das ein Textfeld zeigt, das validiert wird. Wenn der Nutzer „bbbaaa“ eingibt und woanders klickt, wird das Feld in „bbb“ geändert.