Campi di immissione testo

Un campo di input di testo memorizza una stringa come valore e una stringa come testo. Il suo valore è sempre una stringa valida, mentre il testo può essere qualsiasi stringa inserita nel relativo editor.

Campo di inserimento del testo

Un blocco con l'etichetta "text input:" (input di testo) e un campo di input di testo impostato su "default text" (testo predefinito).

Campo di immissione testo con l'editor aperto

Lo stesso blocco con il campo in fase di modifica.

Campo di immissione testo nel blocco compresso

Lo stesso blocco dopo essere stato compresso. Ha l'etichetta "input di testo: testo predefinito" e un bordo destro frastagliato per indicare che è compresso.

Creazione

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');
  }
};

Il costruttore di input di testo accetta un valore facoltativo e un validatore facoltativo. Il valore deve essere convertito in una stringa. Se è null o undefined, verrà utilizzata una stringa vuota.

La definizione JSON consente anche di impostare l'opzione controllo ortografico.

Serializzazione e XML

JSON

Il codice JSON per un campo di input di testo è il seguente:

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

Dove FIELDNAME è una stringa che fa riferimento a un campo di input di testo e il valore è il valore da applicare al campo. Il valore segue le stesse regole del valore del costruttore.

XML

Il codice XML per un campo di immissione del testo è il seguente:

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

Dove l'attributo name del campo contiene una stringa che fa riferimento a un campo di input di testo e il testo interno è il valore da applicare al campo. Il valore del testo interno segue le stesse regole del valore del costruttore.

Personalizzazione

Controllo ortografico

La funzione setSpellcheck può essere utilizzata per impostare se il campo esegue il controllo ortografico del testo di input o meno.

Campi di inserimento di testo con e senza controllo ortografico

Una GIF animata che mostra due blocchi con campi di input di testo. Il primo blocco ha il controllo ortografico attivo e le parole con errori ortografici sono sottolineate con una linea rossa ondulata. Il secondo blocco ha il controllo ortografico disattivato e le parole errate non sono sottolineate.

Il controllo ortografico è attivo per impostazione predefinita.

Questo vale per i singoli campi. Se vuoi modificare tutti i campi, cambia la proprietà Blockly.FieldTextInput.prototype.spellcheck_.

Creazione di un convalidatore di input di testo

Il valore di un campo di input di testo è una stringa, quindi tutti i validatori devono accettare una stringa e restituire una stringa, null o undefined.

Ecco un esempio di un validatore che rimuove tutti i caratteri a dalla stringa:

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

Una GIF animata che mostra la convalida di un campo di input di testo. Quando l&#39;utente digita &quot;bbbaaa&quot; e fa clic altrove, il campo viene modificato in &quot;bbb&quot;.