文字輸入欄位

文字輸入欄位會將字串儲存為值,並將字串儲存為文字。其值一律為有效字串,但文字可以是編輯器中輸入的任何字串。

文字輸入欄位

標籤為「文字輸入:」的區塊,以及設定為「預設文字」的文字輸入欄位。

開啟編輯器的文字輸入欄位

同一個區塊,其中包含要編輯的欄位。

收合式區塊的文字輸入欄位

收合後的相同區塊。標籤為「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');
  }
};

文字輸入建構函式會接收選用值和選用驗證器。這個值應轉換為字串。如果是 nullundefined,則會使用空字串。

您也可以透過 JSON 定義設定 spellcheck 選項。

序列化和 XML

JSON

文字輸入欄位的 JSON 如下所示:

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

其中 FIELDNAME 是參照文字輸入欄位的字串,而 value 是套用至欄位的值。這個值遵循與建構函式值相同的規則。

XML

文字輸入欄位的 XML 如下所示:

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

其中欄位的 name 屬性包含參照文字輸入欄位的字串,內文則是套用至欄位的值。內部文字值遵循與建構函式值相同的規則。

自訂

拼字檢查

setSpellcheck 函式可用來設定欄位是否要對輸入文字進行拼字檢查。

含有和不含拼字檢查的文字輸入欄位

GIF 動畫:顯示兩個含有文字輸入欄位的區塊。第一個區塊已開啟拼寫檢查功能,且錯字會以紅色波浪線標示。第二個區塊已關閉拼寫檢查功能,且不會為拼錯的字詞加上底線。

根據預設,系統會開啟拼字檢查功能。

這適用於個別欄位。如要修改所有欄位,請變更 Blockly.FieldTextInput.prototype.spellcheck_ 屬性。

建立文字輸入驗證器

文字輸入欄位的值是字串,因此任何驗證工具都必須接受字串,並傳回字串、nullundefined

以下是驗證器的範例,可從字串中移除所有「a」字元:

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

GIF 動畫:顯示文字輸入欄位正在驗證。當使用者輸入「bbbaaa」並點選其他位置時,欄位會變更為「bbb」。