テキスト入力フィールド

テキスト入力フィールドには、値として文字列が格納され、テキストとして文字列が格納されます。値は常に有効な文字列ですが、テキストはエディタに入力された任意の文字列になります。

テキスト入力フィールド

「テキスト入力:」というラベルの付いたブロックと、「デフォルトのテキスト」に設定されたテキスト入力フィールド。

エディタが開いているテキスト入力フィールド

編集中のフィールドを含む同じブロック。

折りたたまれたブロックのテキスト入力フィールド

折りたたまれた後の同じブロック。ラベルは「text input: default text」で、右端がギザギザになっているため、折りたたまれていることがわかります。

作成

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

テキスト入力コンストラクタは、オプションの値とオプションのバリデータを受け取ります。値は文字列にキャストする必要があります。null または undefined の場合は、空の文字列が使用されます。

JSON 定義では、スペルチェック オプションを設定することもできます。

シリアル化と XML

JSON

テキスト入力フィールドの JSON は次のようになります。

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

ここで、FIELDNAME はテキスト入力フィールドを参照する文字列で、値はフィールドに適用する値です。値は、コンストラクタの値と同じルールに従います。

XML

テキスト入力フィールドの XML は次のようになります。

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

フィールドの name 属性にテキスト入力フィールドを参照する文字列が含まれており、内部テキストがフィールドに適用する値です。内部テキスト値は、コンストラクタ値と同じルールに従います。

カスタマイズ

スペルチェック

setSpellcheck 関数を使用すると、フィールドで入力テキストのスペルチェックを行うかどうかを設定できます。

スペルチェックありとなしのテキスト入力フィールド

テキスト入力フィールドを含む 2 つのブロックを示すアニメーション GIF。最初のブロックでは、スペルチェックがオンになっており、スペルミスの単語には赤い波線の下線が引かれています。2 つ目のブロックではスペルチェックが無効になっているため、スペルミスのある単語に下線が引かれていません。

スペルチェックはデフォルトでオンになっています。

これは個々のフィールドに適用されます。すべてのフィールドを変更する場合は、Blockly.FieldTextInput.prototype.spellcheck_ プロパティを変更します。

テキスト入力バリデーターの作成

テキスト入力フィールドの値は文字列であるため、バリデーターは文字列を受け取り、文字列、null、または undefined を返す必要があります。

文字列からすべての a 文字を削除するバリデーターの例を次に示します。

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

テキスト入力フィールドが検証されている様子を示すアニメーション GIF。ユーザーが「bbbaaa」と入力して別の場所をクリックすると、フィールドが「bbb」に変更されます。