← Sample Index

#028 TextArea

../../boneflow.js + ../../boneflow.css 共通Standalone動作確認

bf-textarea

確認中...

正式ガイド DOC-0028

既存DOC Integrationの日本語正式ガイド全文を、要約せずこの動作確認ページへ組み込んでいます。

source: docs/doc/content/DOC-0028/ja.md / lines: 1883 / sha256: 983a49a0db1ab5afb13ec837664bdca59d5dcd35a282b6f748024a4ed388a218

DOC-0028 — TextArea 操作・HTML Functional Class

0. 文書情報

  • DOC ID: DOC-0028
  • TOC ID: TOC-0028
  • UI: UI-028 / #028 TextArea
  • Runtime: BoneTextArea v1.0.13
  • DOC Integration: 1.0.2
  • 通常利用HTML Functional Class: bf-textarea
  • Shared DOC: bone-doc-loader.js / bone-doc-guide.js / bone-doc-guide.css(#028固有都合で変更しない)

1. TextAreaの役割

#028 TextAreaは、複数行の文章を「入力中」と「確定済み」に分けて扱う入力UIです。1行用TextBoxとの最大の違いは、Enter単独は確定ではなく改行であることです。

1.1 最初に覚える用語

  • 元textarea — HTMLへ書く <textarea class="bf-textarea"> です。classとdata-*属性から設定を読み取ります。
  • 実TextArea — 画面に実際に表示される.bone-textarea Runtimeです。元textareaの直後へ生成されます。
  • editingValue — 今入力・編集している途中の複数行文字列です。
  • committedValue — Ctrl/Cmd+Enter、blur、またはcommit()で正式確定した最後の文字列です。OUTへ送るのもこの値です。
  • commit — editingValueを検査し、問題がなければcommittedValueとして確定する操作です。Enter単独はcommitではありません。
  • Validation — required / minlength / maxlengthなど、入力ルールを満たすかの確認です。
  • Security — 制御文字、壊れたUnicode、安全上限超過、危険なObject読取等を拒否する安全検査です。Validationより前段の強制検査です。
  • 通常のJavaScript Object — {value:"ABC"}のような通常のJavaScript Objectです。getterやProxy等、読むだけで処理が走る特殊ObjectはUntrusted INでは拒否します。
  • Delivery Channel — #002 Jointが提供するOUT配送経路です。Target BusyならWAITしてQueueへ積み、Ready後にFIFO配送し、guard拒否ならBLOCKEDになります。

1.2 まず基本操作を理解する

  1. 文字を入力するとeditingValueだけが変わります。
  2. Enterを押すと改行します。DefaultでもEnter単独ではcommitしません。
  3. DefaultのcommitShortcut=ctrl-or-meta-enterでは、Windows/LinuxのCtrl+Enter、macOSのCmd+Enterでcommitします。
  4. blurCommit=true(Default)なら、フォーカスを外した時にもcommitを試みます。
  5. required/minlength/maxlengthに違反し、commitInvalid=falseならcommitを拒否し、committedValueは直前の値を維持します。
  6. Escapeは未確定のeditingValueを破棄し、committedValueへ戻します。
  7. Securityで拒否された値はcommitInvalid=trueでも採用しません。

1.3 disabled と readonly の違い

  • disabled=true — 入力・focus・commitを停止します。フォーム操作対象としても無効です。
  • readonly=true — 内容は表示・focus・選択できますが、ユーザー編集とRuntime commitを拒否します。
  • 両方false — 通常編集できます。

1.4 Validation と Security の違い

  • Validation: 「安全な文字列だが入力ルールを満たさない」状態。例: required=trueなのに空、minlength=3なのに2文字。commitInvalid=trueなら確定を許可できます。
  • Security: 「Runtimeへ採用してはいけない」状態。例: securityMaxLength=8で9文字、NUL制御文字、壊れたUnicode。commitInvalid=trueでも必ず拒否します。

2. HTML Functional Class bf-textarea

2.1 最小利用

<textarea class="bf-textarea">1行目
2行目</textarea>

bf-textareaを付けた元textareaを見つけると、HTML Functional Class処理がBoneTextArea.create()を呼び、元textareaの直後へ実TextAreaを生成します。通常利用Classは1個だけです。元textarea自身は非表示になり、commit成功後は確定値を元textareaのvalueへ同期します。利用者が.bone-textarea内部DOMを自分で組み立てる必要はありません。旧bone-html-class-use / 35個API別Classは通常利用仕様ではありません。

[[BF-TEXTAREA-SAMPLE:basic]]

2.2 設定付き利用

<textarea class="bf-textarea"
  data-rows="10" data-cols="60"
  data-wrap="soft" data-resize="vertical" data-scroll="auto"
  data-commit-shortcut="ctrl-or-meta-enter"
  data-theme="neon" data-width="520" data-height="220"
  data-mouseover-border-effect="spin">複数行
サンプル</textarea>

2.3 設定 → 実表示サンプル

Multiline: rows / cols / wrap

rows / colsはtextarea属性の行数・列数hint、wrapは長い1行の折返し方法です。#028はwidth / heightもCSSへ設定するため、最終ピクセルサイズはwidth/heightが優先します。

[[BF-TEXTAREA-SAMPLE:rows]] [[BF-TEXTAREA-SAMPLE:cols]] [[BF-TEXTAREA-SAMPLE:wrapSoft]] [[BF-TEXTAREA-SAMPLE:wrapHard]] [[BF-TEXTAREA-SAMPLE:wrapOff]]

resize 全4値

ユーザーがドラッグして入力領域サイズを変えられる方向を比較します。inheritParent=true時は親100%追従を守るためresizeはnoneになります。

[[BF-TEXTAREA-SAMPLE:resizeNone]] [[BF-TEXTAREA-SAMPLE:resizeVertical]] [[BF-TEXTAREA-SAMPLE:resizeHorizontal]] [[BF-TEXTAREA-SAMPLE:resizeBoth]]

scroll 全3値

内容が高さを超えた時のoverflow表示を比較します。wrap=offでは横方向overflowにも同じ設定を使います。

[[BF-TEXTAREA-SAMPLE:scrollAuto]] [[BF-TEXTAREA-SAMPLE:scrollHidden]] [[BF-TEXTAREA-SAMPLE:scrollScroll]]

commitShortcut 全4値

Enter単独は全4値で改行です。 ここで変わるのは「どの修飾キー+Enterでcommitするか」です。

[[BF-TEXTAREA-SAMPLE:commitCtrl]] [[BF-TEXTAREA-SAMPLE:commitMeta]] [[BF-TEXTAREA-SAMPLE:commitBoth]] [[BF-TEXTAREA-SAMPLE:commitNone]]

Validation / 操作

disabled / readonly / selectOnFocus / blurCommit / commitInvalidの違いを実Runtimeで確認します。特にcommitInvalidが無視できるのはValidationだけで、Security拒否には効きません。

[[BF-TEXTAREA-SAMPLE:required]] [[BF-TEXTAREA-SAMPLE:disabled]] [[BF-TEXTAREA-SAMPLE:readonly]] [[BF-TEXTAREA-SAMPLE:select]] [[BF-TEXTAREA-SAMPLE:blurNo]] [[BF-TEXTAREA-SAMPLE:commitInvalid]]

Theme 全4値

Themeはrootのsurface・入力文字・枠・accentの組合せを切り替えます。backgroundColorをHEX/transparentで指定した場合は背景だけThemeより優先されます。

[[BF-TEXTAREA-SAMPLE:themeDefault]] [[BF-TEXTAREA-SAMPLE:themeDark]] [[BF-TEXTAREA-SAMPLE:themeLight]] [[BF-TEXTAREA-SAMPLE:themeNeon]]

Background / Appearance / Align / Size

背景色、外枠の見せ方、各行の文字寄せ、単体サイズがそれぞれ別Propertyで変わることを比較します。

[[BF-TEXTAREA-SAMPLE:bgTransparent]] [[BF-TEXTAREA-SAMPLE:bgRgba]] [[BF-TEXTAREA-SAMPLE:appNormal]] [[BF-TEXTAREA-SAMPLE:appFlat]] [[BF-TEXTAREA-SAMPLE:appBorderless]] [[BF-TEXTAREA-SAMPLE:alignAuto]] [[BF-TEXTAREA-SAMPLE:alignLeft]] [[BF-TEXTAREA-SAMPLE:alignCenter]] [[BF-TEXTAREA-SAMPLE:alignRight]] [[BF-TEXTAREA-SAMPLE:size]]

Active / Mouse Over Effect

Activeはfocus中、Mouse Overはhover中だけ表示される別Effectです。Mouse Overは#022へ委譲します。

[[BF-TEXTAREA-SAMPLE:activeNeon]] [[BF-TEXTAREA-SAMPLE:activeBlink]] [[BF-TEXTAREA-SAMPLE:hoverNeon]] [[BF-TEXTAREA-SAMPLE:hoverSpin]] [[BF-TEXTAREA-SAMPLE:hoverCross]] [[BF-TEXTAREA-SAMPLE:hoverBlink]]

inheritParent / Security

inheritParent=trueは単体width/height/resize/inputAlignより親styleを優先します。Security sampleは受理上限そのものを確認します。

[[BF-TEXTAREA-SAMPLE:inheritParent]] [[BF-TEXTAREA-SAMPLE:security]]

2.4 HTML宣言Property 全38件「設定 → 表示/動作」早見

  • placeholder — 型 string / Default "" / HTML placeholder / data-placeholder / 空欄時に補助文字を表示。値が入ると表示されない。
  • disabled — 型 boolean / Default false / HTML disabled / data-disabled / trueで入力・focus・編集を無効化する。
  • readonly — 型 boolean / Default false / HTML readonly / data-readonly / trueで値編集を禁止するが、内容の選択・参照は可能。
  • required — 型 boolean / Default false / HTML required / data-required / 空文字をValidation errorにする。
  • minlength — 型 integer/null / Default null / HTML minlength / data-minlength / 最小文字数を設定する。
  • maxlength — 型 integer/null / Default null / HTML maxlength / data-maxlength / 最大文字数を設定し、実textareaのmaxLengthにも反映する。
  • name — 型 string / Default "" / HTML name / data-name / 内部textareaのnameを設定する。
  • autocomplete — 型 string / Default "off" / HTML autocomplete / data-autocomplete / 内部textareaのautocomplete属性を設定する。
  • spellcheck — 型 boolean / Default false / HTML spellcheck / data-spellcheck / ブラウザのスペルチェック指定。
  • inputMode — 型 string / Default "text" / HTML inputmode / data-input-mode / ソフトキーボード等の入力モードhint。
  • rows — 型 integer / Default 6 / HTML rows / data-rows / textareaの表示行数hintを設定する。
  • cols — 型 integer / Default 40 / HTML cols / data-cols / textareaの表示列数hintを設定する。
  • wrap — 型 enum / Default "soft" / HTML wrap / data-wrap / 長い行の折返し方法を指定する。
  • resize — 型 enum / Default "vertical" / HTML data-resize / ユーザーによるリサイズ方向を指定する。
  • scroll — 型 enum / Default "auto" / HTML data-scroll / overflow表示方法を指定する。
  • commitShortcut — 型 enum / Default "ctrl-or-meta-enter" / HTML data-commit-shortcut / 複数行入力でcommitするショートカットを指定する。
  • blurCommit — 型 boolean / Default true / HTML data-blur-commit / focusを失った時にcommitするか指定。
  • commitInvalid — 型 boolean / Default false / HTML data-commit-invalid / Validation invalidでもcommitを許可するか指定。
  • selectOnFocus — 型 boolean / Default false / HTML data-select-on-focus / focus時に全文選択する。
  • ariaLabel — 型 string / Default "" / HTML aria-label / data-aria-label / 内部textareaのARIA labelを設定。
  • className — 型 string / Default "" / HTML data-class-name / Runtime rootへ追加Classをcreate時に付与。
  • theme — 型 enum / Default "default" / HTML data-theme / テーマ配色を選択。
  • backgroundColor — 型 color / Default "theme" / HTML data-background-color / TextArea背景色を指定。
  • appearance — 型 enum / Default "normal" / HTML data-appearance / 外見モードを指定。
  • inheritParent — 型 boolean / Default false / HTML data-inherit-parent / 親要素のサイズ・背景・文字色・枠・角丸・text-alignへ追従。
  • width — 型 number px / Default 480 / HTML data-width / 単体時のRuntime幅。
  • height — 型 number px / Default 160 / HTML data-height / textarea本体の高さ。
  • position — 型 enum / Default "center" / HTML data-position / 親Preview内での9方向配置。
  • inputAlign — 型 enum / Default "auto" / HTML data-input-align / 入力文字の横方向寄せ。
  • activeBorderEffect — 型 enum / Default "normal" / HTML data-active-border-effect / focus中のActive枠Effectを選択。
  • activeEffectColor — 型 color / Default "theme" / HTML data-active-effect-color / Active Effect色を指定。
  • activeEffectDirection — 型 enum / Default "clockwise" / HTML data-active-effect-direction / Active Effect方向。
  • activeEffectSpeed — 型 enum / Default "normal" / HTML data-active-effect-speed / Active Effect速度。
  • mouseoverBorderEffect — 型 enum / Default "normal" / HTML data-mouseover-border-effect / Mouse Over時の#022枠Effect。
  • mouseoverEffectColor — 型 color / Default "theme" / HTML data-mouseover-effect-color / Mouse Over Effect色。
  • mouseoverEffectDirection — 型 enum / Default "clockwise" / HTML data-mouseover-effect-direction / Mouse Over Effect方向。
  • mouseoverEffectSpeed — 型 enum / Default "normal" / HTML data-mouseover-effect-speed / Mouse Over Effect速度。
  • securityMaxLength — 型 integer / Default 262144 / HTML data-security-max-length / Security Gateが受理する文字列長上限。

3. Default Property 全38件 — 個別Reference

3.1 placeholder

  • 型: string
  • Runtime Default: ""
  • HTML指定: placeholder / data-placeholder
  • 役割: 空欄時に補助文字を表示。値が入ると表示されない。
  • 初めて使う人向け: 入力が空の時だけ見える補助文です。ユーザーが文字を入力すると消えます。
  • 不正例: BoneTextArea.setOptions(root,{placeholder:{}})
  • 修正例: data-placeholder="複数行を入力"
  • 許容値の詳細: 任意string。HTML風文字列もplaceholder文字列として扱う。
  • 具体例: placeholder="複数行を入力"
  • 設定後の表示/動作: 入力が空の時だけ補助文字が見える。
  • 無効値/Error: TEXTAREA_OPTION_TYPE_INVALID等で拒否します。不正設定を黙って別値へ変換しません。
  • 関連/競合: 下記の具体例と各章の優先規則を確認してください。親追従、Validation、Security、Effect依存があるPropertyは単独で判断しません。

3.2 disabled

  • 型: boolean
  • Runtime Default: false
  • HTML指定: disabled / data-disabled
  • 役割: trueで入力・focus・編集を無効化する。
  • 初めて使う人向け: 「この欄を操作させない」設定です。編集だけでなくfocus/commitも止めます。
  • 不正例: data-disabled="maybe"
  • 修正例: data-disabled="true"
  • 許容値の詳細: true/false。disabledはreadonlyより強い操作禁止。
  • 具体例: data-disabled="true"
  • 設定後の表示/動作: textareaが無効状態になり編集できない。
  • 無効値/Error: TEXTAREA_OPTION_TYPE_INVALID等で拒否します。不正設定を黙って別値へ変換しません。
  • 関連/競合: 下記の具体例と各章の優先規則を確認してください。親追従、Validation、Security、Effect依存があるPropertyは単独で判断しません。

3.3 readonly

  • 型: boolean
  • Runtime Default: false
  • HTML指定: readonly / data-readonly
  • 役割: trueで値編集を禁止するが、内容の選択・参照は可能。
  • 初めて使う人向け: 「内容は見せるが書き換えさせない」設定です。disabledより弱く、focusや文字選択は可能です。
  • 不正例: data-readonly="maybe"
  • 修正例: data-readonly="true"
  • 許容値の詳細: true/false。disabled=falseでもreadonly=trueなら編集不可。
  • 具体例: data-readonly="true"
  • 設定後の表示/動作: 値は表示されるがキーボード編集できない。
  • 無効値/Error: TEXTAREA_OPTION_TYPE_INVALID等で拒否します。不正設定を黙って別値へ変換しません。
  • 関連/競合: 下記の具体例と各章の優先規則を確認してください。親追従、Validation、Security、Effect依存があるPropertyは単独で判断しません。

3.4 required

  • 型: boolean
  • Runtime Default: false
  • HTML指定: required / data-required
  • 役割: 空文字をValidation errorにする。
  • 初めて使う人向け: 空文字を入力エラーにする設定です。空白文字そのものを自動trimする設定ではありません。
  • 不正例: data-required="maybe"
  • 修正例: data-required="true"
  • 許容値の詳細: true/false。commitInvalid=falseではinvalid値をcommitしない。
  • 具体例: data-required="true"
  • 設定後の表示/動作: 空文字でrequired error、文字があればvalid。
  • 無効値/Error: TEXTAREA_OPTION_TYPE_INVALID等で拒否します。不正設定を黙って別値へ変換しません。
  • 関連/競合: 下記の具体例と各章の優先規則を確認してください。親追従、Validation、Security、Effect依存があるPropertyは単独で判断しません。

3.5 minlength

  • 型: integer/null
  • Runtime Default: null
  • HTML指定: minlength / data-minlength
  • 役割: 最小文字数を設定する。
  • 初めて使う人向け: 確定する文字列の最小文字数ルールです。改行もJavaScript文字列長として数えます。
  • 不正例: data-minlength="-1"
  • 修正例: data-minlength="3"
  • 許容値の詳細: nullまたは0以上整数。maxlength指定時はminlength<=maxlength。
  • 具体例: data-minlength="3"
  • 設定後の表示/動作: 2文字以下はinvalid、3文字以上で条件を満たす。
  • 無効値/Error: TEXTAREA_LENGTH_INVALID等で拒否します。不正設定を黙って別値へ変換しません。
  • 関連/競合: 下記の具体例と各章の優先規則を確認してください。親追従、Validation、Security、Effect依存があるPropertyは単独で判断しません。

3.6 maxlength

  • 型: integer/null
  • Runtime Default: null
  • HTML指定: maxlength / data-maxlength
  • 役割: 最大文字数を設定し、実textareaのmaxLengthにも反映する。
  • 初めて使う人向け: 入力・Validationで使う最大文字数です。Security上限より大きくは設定できません。
  • 不正例: data-maxlength="500" data-security-max-length="100"
  • 修正例: data-maxlength="100" data-security-max-length="100"
  • 許容値の詳細: nullまたは0以上整数。securityMaxLength以下かつminlength以上。
  • 具体例: data-maxlength="100"
  • 設定後の表示/動作: 100文字を上限として入力・Validationが制限される。
  • 無効値/Error: TEXTAREA_MAXLENGTH_SECURITY_RANGE等で拒否します。不正設定を黙って別値へ変換しません。
  • 関連/競合: 下記の具体例と各章の優先規則を確認してください。親追従、Validation、Security、Effect依存があるPropertyは単独で判断しません。

3.7 name

  • 型: string
  • Runtime Default: ""
  • HTML指定: name / data-name
  • 役割: 内部textareaのnameを設定する。
  • 初めて使う人向け: フォーム連携用のname属性です。見た目は変わりません。
  • 不正例: BoneTextArea.setOptions(root,{name:{}})
  • 修正例: name="memo"
  • 許容値の詳細: 任意string。見た目は変わらない。
  • 具体例: name="memo"
  • 設定後の表示/動作: DOM属性name=memoになる。
  • 無効値/Error: TEXTAREA_OPTION_TYPE_INVALID等で拒否します。不正設定を黙って別値へ変換しません。
  • 関連/競合: 下記の具体例と各章の優先規則を確認してください。親追従、Validation、Security、Effect依存があるPropertyは単独で判断しません。

3.8 autocomplete

  • 型: string
  • Runtime Default: "off"
  • HTML指定: autocomplete / data-autocomplete
  • 役割: 内部textareaのautocomplete属性を設定する。
  • 初めて使う人向け: ブラウザの入力補完hintです。見た目が変わらない場合があります。
  • 不正例: BoneTextArea.setOptions(root,{autocomplete:{}})
  • 修正例: autocomplete="off"
  • 許容値の詳細: string。空ならoff。ブラウザ支援挙動に影響し見た目は通常変わらない。
  • 具体例: autocomplete="off"
  • 設定後の表示/動作: autocomplete属性がoffになる。
  • 無効値/Error: TEXTAREA_OPTION_TYPE_INVALID等で拒否します。不正設定を黙って別値へ変換しません。
  • 関連/競合: 下記の具体例と各章の優先規則を確認してください。親追従、Validation、Security、Effect依存があるPropertyは単独で判断しません。

3.9 spellcheck

  • 型: boolean
  • Runtime Default: false
  • HTML指定: spellcheck / data-spellcheck
  • 役割: ブラウザのスペルチェック指定。
  • 初めて使う人向け: ブラウザのスペルチェック対象にするかを指定します。ブラウザ/言語により表示差があります。
  • 不正例: data-spellcheck="maybe"
  • 修正例: data-spellcheck="true"
  • 許容値の詳細: true/false。ブラウザ実装依存。
  • 具体例: data-spellcheck="true"
  • 設定後の表示/動作: 対応ブラウザでスペルチェック対象になる。
  • 無効値/Error: TEXTAREA_OPTION_TYPE_INVALID等で拒否します。不正設定を黙って別値へ変換しません。
  • 関連/競合: 下記の具体例と各章の優先規則を確認してください。親追従、Validation、Security、Effect依存があるPropertyは単独で判断しません。

3.10 inputMode

  • 型: string
  • Runtime Default: "text"
  • HTML指定: inputmode / data-input-mode
  • 役割: ソフトキーボード等の入力モードhint。
  • 初めて使う人向け: モバイル等で表示するソフトキーボードのhintです。デスクトップでは見た目が変わらないことがあります。
  • 不正例: BoneTextArea.setOptions(root,{inputMode:{}})
  • 修正例: data-input-mode="text"
  • 許容値の詳細: string。空ならtext。デスクトップでは見た目が変わらない場合がある。
  • 具体例: data-input-mode="text"
  • 設定後の表示/動作: inputMode=textとしてRuntimeへ反映。
  • 無効値/Error: TEXTAREA_OPTION_TYPE_INVALID等で拒否します。不正設定を黙って別値へ変換しません。
  • 関連/競合: 下記の具体例と各章の優先規則を確認してください。親追従、Validation、Security、Effect依存があるPropertyは単独で判断しません。

3.11 rows

  • 型: integer
  • Runtime Default: 6
  • HTML指定: rows / data-rows
  • 役割: textareaの表示行数hintを設定する。
  • 初めて使う人向け: textareaの行数属性です。高さをpxで指定するheightとは役割が違い、最終見た目はheightが優先します。
  • 不正例: data-rows="0"
  • 修正例: data-rows="10"
  • 許容値の詳細: 1~1000の整数。heightも指定されるため最終高さはheight CSSが優先。
  • 具体例: data-rows="10"
  • 設定後の表示/動作: DOM rows=10。行数hintが増える。
  • 無効値/Error: TEXTAREA_INTEGER_RANGE_INVALID等で拒否します。不正設定を黙って別値へ変換しません。
  • 関連/競合: 下記の具体例と各章の優先規則を確認してください。親追従、Validation、Security、Effect依存があるPropertyは単独で判断しません。

3.12 cols

  • 型: integer
  • Runtime Default: 40
  • HTML指定: cols / data-cols
  • 役割: textareaの表示列数hintを設定する。
  • 初めて使う人向け: textareaの列数属性です。幅をpxで指定するwidthとは役割が違い、最終見た目はwidthが優先します。
  • 不正例: data-cols="1001"
  • 修正例: data-cols="60"
  • 許容値の詳細: 1~1000の整数。widthも指定されるため最終幅はwidth CSSが優先。
  • 具体例: data-cols="60"
  • 設定後の表示/動作: DOM cols=60。列数hintが更新される。
  • 無効値/Error: TEXTAREA_INTEGER_RANGE_INVALID等で拒否します。不正設定を黙って別値へ変換しません。
  • 関連/競合: 下記の具体例と各章の優先規則を確認してください。親追従、Validation、Security、Effect依存があるPropertyは単独で判断しません。

3.13 wrap

  • 型: enum
  • Runtime Default: "soft"
  • HTML指定: wrap / data-wrap
  • 役割: 長い行の折返し方法を指定する。
  • 初めて使う人向け: 長い1行を画面上で折り返すかを決めます。offだけ自動折返しを止めます。
  • 不正例: data-wrap="nowrap"
  • 修正例: data-wrap="off"
  • 許容値の詳細: soft / hard / off。offではwhite-space=pre、横overflowがscroll設定に従う。
  • 具体例: data-wrap="off"
  • 設定後の表示/動作: 自動折返しせず長い行を横方向へ保持する。
  • 無効値/Error: TEXTAREA_OPTION_ENUM_INVALID等で拒否します。不正設定を黙って別値へ変換しません。
  • 関連/競合: 下記の具体例と各章の優先規則を確認してください。親追従、Validation、Security、Effect依存があるPropertyは単独で判断しません。

3.14 resize

  • 型: enum
  • Runtime Default: "vertical"
  • HTML指定: data-resize
  • 役割: ユーザーによるリサイズ方向を指定する。
  • 初めて使う人向け: 右下等のリサイズ操作を許可する方向です。親追従中は無効化されます。
  • 不正例: data-resize="diagonal"
  • 修正例: data-resize="both"
  • 許容値の詳細: none / vertical / horizontal / both。inheritParent=trueではnoneへ抑制。
  • 具体例: data-resize="both"
  • 設定後の表示/動作: 右下ハンドルで縦横リサイズ可能になる。
  • 無効値/Error: TEXTAREA_OPTION_ENUM_INVALID等で拒否します。不正設定を黙って別値へ変換しません。
  • 関連/競合: 下記の具体例と各章の優先規則を確認してください。親追従、Validation、Security、Effect依存があるPropertyは単独で判断しません。

3.15 scroll

  • 型: enum
  • Runtime Default: "auto"
  • HTML指定: data-scroll
  • 役割: overflow表示方法を指定する。
  • 初めて使う人向け: 内容が入力領域を超えた時のスクロールバー/overflowの扱いです。
  • 不正例: data-scroll="visible"
  • 修正例: data-scroll="auto"
  • 許容値の詳細: auto / hidden / scroll。wrap=off時はoverflowXにも適用。
  • 具体例: data-scroll="scroll"
  • 設定後の表示/動作: スクロールバーを常時確保する。
  • 無効値/Error: TEXTAREA_OPTION_ENUM_INVALID等で拒否します。不正設定を黙って別値へ変換しません。
  • 関連/競合: 下記の具体例と各章の優先規則を確認してください。親追従、Validation、Security、Effect依存があるPropertyは単独で判断しません。

3.16 commitShortcut

  • 型: enum
  • Runtime Default: "ctrl-or-meta-enter"
  • HTML指定: data-commit-shortcut
  • 役割: 複数行入力でcommitするショートカットを指定する。
  • 初めて使う人向け: 複数行入力を壊さず確定するためのショートカットです。Enter単独は常に改行です。
  • 不正例: data-commit-shortcut="enter"
  • 修正例: data-commit-shortcut="ctrl-or-meta-enter"
  • 許容値の詳細: ctrl-enter / meta-enter / ctrl-or-meta-enter / none。Enter単独は常に改行。
  • 具体例: data-commit-shortcut="ctrl-enter"
  • 設定後の表示/動作: Ctrl+Enterだけがcommit、通常Enterは改行。
  • 無効値/Error: TEXTAREA_OPTION_ENUM_INVALID等で拒否します。不正設定を黙って別値へ変換しません。
  • 関連/競合: 下記の具体例と各章の優先規則を確認してください。親追従、Validation、Security、Effect依存があるPropertyは単独で判断しません。

3.17 blurCommit

  • 型: boolean
  • Runtime Default: true
  • HTML指定: data-blur-commit
  • 役割: focusを失った時にcommitするか指定。
  • 初めて使う人向け: 欄の外をクリック/Tab移動した時に自動確定するかです。
  • 不正例: data-blur-commit="maybe"
  • 修正例: data-blur-commit="false"
  • 許容値の詳細: true/false。falseではblurしてもeditingValueだけ残る。
  • 具体例: data-blur-commit="false"
  • 設定後の表示/動作: blurしても確定値は更新されない。
  • 無効値/Error: TEXTAREA_OPTION_TYPE_INVALID等で拒否します。不正設定を黙って別値へ変換しません。
  • 関連/競合: 下記の具体例と各章の優先規則を確認してください。親追従、Validation、Security、Effect依存があるPropertyは単独で判断しません。

3.18 commitInvalid

  • 型: boolean
  • Runtime Default: false
  • HTML指定: data-commit-invalid
  • 役割: Validation invalidでもcommitを許可するか指定。
  • 初めて使う人向け: required/文字数のValidation Errorを承知で確定するかです。Security拒否には効きません。
  • 不正例: data-commit-invalid="maybe"
  • 修正例: data-commit-invalid="true"
  • 許容値の詳細: true/false。Security rejectはこの設定では許可されない。
  • 具体例: data-commit-invalid="true"
  • 設定後の表示/動作: required/minlength等のinvalid値もcommit可能。
  • 無効値/Error: TEXTAREA_OPTION_TYPE_INVALID等で拒否します。不正設定を黙って別値へ変換しません。
  • 関連/競合: 下記の具体例と各章の優先規則を確認してください。親追従、Validation、Security、Effect依存があるPropertyは単独で判断しません。

3.19 selectOnFocus

  • 型: boolean
  • Runtime Default: false
  • HTML指定: data-select-on-focus
  • 役割: focus時に全文選択する。
  • 初めて使う人向け: focusした瞬間に全文を選択します。既存文章を一括置換したい場合に使います。
  • 不正例: data-select-on-focus="maybe"
  • 修正例: data-select-on-focus="true"
  • 許容値の詳細: true/false。disabledではfocus自体不可。
  • 具体例: data-select-on-focus="true"
  • 設定後の表示/動作: focus直後にtextarea全文が選択される。
  • 無効値/Error: TEXTAREA_OPTION_TYPE_INVALID等で拒否します。不正設定を黙って別値へ変換しません。
  • 関連/競合: 下記の具体例と各章の優先規則を確認してください。親追従、Validation、Security、Effect依存があるPropertyは単独で判断しません。

3.20 ariaLabel

  • 型: string
  • Runtime Default: ""
  • HTML指定: aria-label / data-aria-label
  • 役割: 内部textareaのARIA labelを設定。
  • 初めて使う人向け: 画面上には通常見えない、支援技術向けの入力欄名です。
  • 不正例: BoneTextArea.setOptions(root,{ariaLabel:{}})
  • 修正例: data-aria-label="備考"
  • 許容値の詳細: 任意string。空ならaria-labelを除去。
  • 具体例: data-aria-label="備考"
  • 設定後の表示/動作: 支援技術向け名称が備考になる。
  • 無効値/Error: TEXTAREA_OPTION_TYPE_INVALID等で拒否します。不正設定を黙って別値へ変換しません。
  • 関連/競合: 下記の具体例と各章の優先規則を確認してください。親追従、Validation、Security、Effect依存があるPropertyは単独で判断しません。

3.21 className

  • 型: string
  • Runtime Default: ""
  • HTML指定: data-class-name
  • 役割: Runtime rootへ追加Classをcreate時に付与。
  • 初めて使う人向け: 生成時のRuntime rootへ利用側Classを追加します。内部標準Classは消しません。
  • 不正例: BoneTextArea.setOptions(root,{className:{}})
  • 修正例: data-class-name="memo-field"
  • 許容値の詳細: 任意string。内部標準Class bone-textareaは維持。
  • 具体例: data-class-name="memo-field"
  • 設定後の表示/動作: rootにmemo-field Classが追加される。
  • 無効値/Error: TEXTAREA_OPTION_TYPE_INVALID等で拒否します。不正設定を黙って別値へ変換しません。
  • 関連/競合: 下記の具体例と各章の優先規則を確認してください。親追従、Validation、Security、Effect依存があるPropertyは単独で判断しません。

3.22 theme

  • 型: enum
  • Runtime Default: "default"
  • HTML指定: data-theme
  • 役割: テーマ配色を選択。
  • 初めて使う人向け: 背景・文字・枠・accentの基本配色セットです。
  • 不正例: data-theme="blue"
  • 修正例: data-theme="neon"
  • 許容値の詳細: default / dark / light / neon。backgroundColor=theme時はTheme背景が使われる。
  • 具体例: data-theme="neon"
  • 設定後の表示/動作: Neon配色・accentへ変化する。
  • 無効値/Error: TEXTAREA_OPTION_ENUM_INVALID等で拒否します。不正設定を黙って別値へ変換しません。
  • 関連/競合: 下記の具体例と各章の優先規則を確認してください。親追従、Validation、Security、Effect依存があるPropertyは単独で判断しません。

3.23 backgroundColor

  • 型: color
  • Runtime Default: "theme"
  • HTML指定: data-background-color
  • 役割: TextArea背景色を指定。
  • 初めて使う人向け: Themeのうち背景だけを明示色/透明で上書きします。
  • 不正例: data-background-color="red"
  • 修正例: data-background-color="#26354acc"
  • 許容値の詳細: theme / transparent / #RGB / #RGBA / #RRGGBB / #RRGGBBAA。
  • 具体例: data-background-color="#26354acc"
  • 設定後の表示/動作: 半透明HEX背景を使う。
  • 無効値/Error: TEXTAREA_BACKGROUND_COLOR_INVALID等で拒否します。不正設定を黙って別値へ変換しません。
  • 関連/競合: 下記の具体例と各章の優先規則を確認してください。親追従、Validation、Security、Effect依存があるPropertyは単独で判断しません。

3.24 appearance

  • 型: enum
  • Runtime Default: "normal"
  • HTML指定: data-appearance
  • 役割: 外見モードを指定。
  • 初めて使う人向け: 通常枠、flat、borderless、親継承互換入力を切り替えます。
  • 不正例: data-appearance="rounded"
  • 修正例: data-appearance="flat"
  • 許容値の詳細: normal / flat / borderless / inherit。inheritは互換入力で内部的にnormal+inheritParent=trueへ正規化。
  • 具体例: data-appearance="borderless"
  • 設定後の表示/動作: 通常枠を抑えたborderless外観になる。
  • 無効値/Error: TEXTAREA_OPTION_ENUM_INVALID等で拒否します。不正設定を黙って別値へ変換しません。
  • 関連/競合: 下記の具体例と各章の優先規則を確認してください。親追従、Validation、Security、Effect依存があるPropertyは単独で判断しません。

3.25 inheritParent

  • 型: boolean
  • Runtime Default: false
  • HTML指定: data-inherit-parent
  • 役割: 親要素のサイズ・背景・文字色・枠・角丸・text-alignへ追従。
  • 初めて使う人向け: TextArea単体の見た目ではなく親要素のサイズ/配色/整列へ追従させます。
  • 不正例: data-inherit-parent="maybe"
  • 修正例: data-inherit-parent="true"
  • 許容値の詳細: true/false。true時はwidth/height/resize/inputAlignの単体指定より親追従が優先。
  • 具体例: data-inherit-parent="true"
  • 設定後の表示/動作: rootが親100%、textareaも親高100%で親styleへ追従。
  • 無効値/Error: TEXTAREA_OPTION_TYPE_INVALID等で拒否します。不正設定を黙って別値へ変換しません。
  • 関連/競合: 下記の具体例と各章の優先規則を確認してください。親追従、Validation、Security、Effect依存があるPropertyは単独で判断しません。

3.26 width

  • 型: number px
  • Runtime Default: 480
  • HTML指定: data-width
  • 役割: 単体時のRuntime幅。
  • 初めて使う人向け: 親追従しない通常時のRuntime横幅です。
  • 不正例: data-width="20"
  • 修正例: data-width="520"
  • 許容値の詳細: 40~4000px。inheritParent=trueではroot width=100%。
  • 具体例: data-width="600"
  • 設定後の表示/動作: 単体Runtime幅が600pxになる。
  • 無効値/Error: TEXTAREA_SIZE_INVALID等で拒否します。不正設定を黙って別値へ変換しません。
  • 関連/競合: 下記の具体例と各章の優先規則を確認してください。親追従、Validation、Security、Effect依存があるPropertyは単独で判断しません。

3.27 height

  • 型: number px
  • Runtime Default: 160
  • HTML指定: data-height
  • 役割: textarea本体の高さ。
  • 初めて使う人向け: 親追従しない通常時の複数行入力領域の高さです。
  • 不正例: data-height="20"
  • 修正例: data-height="220"
  • 許容値の詳細: 48~2000px。inheritParent=trueでは100%。
  • 具体例: data-height="240"
  • 設定後の表示/動作: 複数行入力領域が240px高になる。
  • 無効値/Error: TEXTAREA_SIZE_INVALID等で拒否します。不正設定を黙って別値へ変換しません。
  • 関連/競合: 下記の具体例と各章の優先規則を確認してください。親追従、Validation、Security、Effect依存があるPropertyは単独で判断しません。

3.28 position

  • 型: enum
  • Runtime Default: "center"
  • HTML指定: data-position
  • 役割: 親Preview内での9方向配置。
  • 初めて使う人向け: 親Preview内でTextArea全体を9方向のどこへ置くかです。
  • 不正例: data-position="left-top"
  • 修正例: data-position="top-left"
  • 許容値の詳細: top-left / top-center / top-right / middle-left / center / middle-right / bottom-left / bottom-center / bottom-right。
  • 具体例: data-position="bottom-right"
  • 設定後の表示/動作: 単体Runtimeが親領域右下へ配置される。
  • 無効値/Error: TEXTAREA_OPTION_ENUM_INVALID等で拒否します。不正設定を黙って別値へ変換しません。
  • 関連/競合: 下記の具体例と各章の優先規則を確認してください。親追従、Validation、Security、Effect依存があるPropertyは単独で判断しません。

3.29 inputAlign

  • 型: enum
  • Runtime Default: "auto"
  • HTML指定: data-input-align
  • 役割: 入力文字の横方向寄せ。
  • 初めて使う人向け: 各行の文字を左/中央/右のどこへ寄せるかです。
  • 不正例: data-input-align="justify"
  • 修正例: data-input-align="center"
  • 許容値の詳細: auto / left / center / right。autoはleft。inheritParent時は親text-alignが優先。
  • 具体例: data-input-align="center"
  • 設定後の表示/動作: 入力文字が中央寄せになる。
  • 無効値/Error: TEXTAREA_OPTION_ENUM_INVALID等で拒否します。不正設定を黙って別値へ変換しません。
  • 関連/競合: 下記の具体例と各章の優先規則を確認してください。親追従、Validation、Security、Effect依存があるPropertyは単独で判断しません。

3.30 activeBorderEffect

  • 型: enum
  • Runtime Default: "normal"
  • HTML指定: data-active-border-effect
  • 役割: focus中のActive枠Effectを選択。
  • 初めて使う人向け: focusしている間だけ出すActive枠表現です。TextArea内部責務です。
  • 不正例: data-active-border-effect="spin"
  • 修正例: data-active-border-effect="neon"
  • 許容値の詳細: normal / neon / blink。Active EffectはTextArea内部責務。
  • 具体例: data-active-border-effect="neon"
  • 設定後の表示/動作: focus中にneon枠表示。
  • 無効値/Error: TEXTAREA_OPTION_ENUM_INVALID等で拒否します。不正設定を黙って別値へ変換しません。
  • 関連/競合: 下記の具体例と各章の優先規則を確認してください。親追従、Validation、Security、Effect依存があるPropertyは単独で判断しません。

3.31 activeEffectColor

  • 型: color
  • Runtime Default: "theme"
  • HTML指定: data-active-effect-color
  • 役割: Active Effect色を指定。
  • 初めて使う人向け: Active枠の色です。themeまたはHEXを使います。
  • 不正例: data-active-effect-color="red"
  • 修正例: data-active-effect-color="#35f4ff"
  • 許容値の詳細: theme / HEX(#RGB/#RGBA/#RRGGBB/#RRGGBBAA)。
  • 具体例: data-active-effect-color="#35f4ff"
  • 設定後の表示/動作: focus Effectが指定色になる。
  • 無効値/Error: TEXTAREA_ACTIVE_EFFECT_COLOR_INVALID等で拒否します。不正設定を黙って別値へ変換しません。
  • 関連/競合: 下記の具体例と各章の優先規則を確認してください。親追従、Validation、Security、Effect依存があるPropertyは単独で判断しません。

3.32 activeEffectDirection

  • 型: enum
  • Runtime Default: "clockwise"
  • HTML指定: data-active-effect-direction
  • 役割: Active Effect方向。
  • 初めて使う人向け: Active Effectの進行方向です。Effect種類によって見た目差がない場合があります。
  • 不正例: data-active-effect-direction="left"
  • 修正例: data-active-effect-direction="counterclockwise"
  • 許容値の詳細: clockwise / counterclockwise。Effect種類によって視覚差が小さい場合あり。
  • 具体例: data-active-effect-direction="counterclockwise"
  • 設定後の表示/動作: Active Effect方向が反時計回りになる。
  • 無効値/Error: TEXTAREA_OPTION_ENUM_INVALID等で拒否します。不正設定を黙って別値へ変換しません。
  • 関連/競合: 下記の具体例と各章の優先規則を確認してください。親追従、Validation、Security、Effect依存があるPropertyは単独で判断しません。

3.33 activeEffectSpeed

  • 型: enum
  • Runtime Default: "normal"
  • HTML指定: data-active-effect-speed
  • 役割: Active Effect速度。
  • 初めて使う人向け: Active Effectの周期です。slow/normal/fastを選びます。
  • 不正例: data-active-effect-speed="turbo"
  • 修正例: data-active-effect-speed="fast"
  • 許容値の詳細: slow=2s / normal=1.2s / fast=.65s。
  • 具体例: data-active-effect-speed="fast"
  • 設定後の表示/動作: Active Effect周期が高速になる。
  • 無効値/Error: TEXTAREA_OPTION_ENUM_INVALID等で拒否します。不正設定を黙って別値へ変換しません。
  • 関連/競合: 下記の具体例と各章の優先規則を確認してください。親追従、Validation、Security、Effect依存があるPropertyは単独で判断しません。

3.34 mouseoverBorderEffect

  • 型: enum
  • Runtime Default: "normal"
  • HTML指定: data-mouseover-border-effect
  • 役割: Mouse Over時の#022枠Effect。
  • 初めて使う人向け: マウスを重ねている間だけ出す#022 Hover Border Effectの種類です。
  • 不正例: data-mouseover-border-effect="pulse"
  • 修正例: data-mouseover-border-effect="spin"
  • 許容値の詳細: normal / neon / spin / cross / blink。#022 Hover Border Effect v1.0.8+を使用。
  • 具体例: data-mouseover-border-effect="spin"
  • 設定後の表示/動作: hoverでspin Effectが表示される。
  • 無効値/Error: TEXTAREA_OPTION_ENUM_INVALID等で拒否します。不正設定を黙って別値へ変換しません。
  • 関連/競合: 下記の具体例と各章の優先規則を確認してください。親追従、Validation、Security、Effect依存があるPropertyは単独で判断しません。

3.35 mouseoverEffectColor

  • 型: color
  • Runtime Default: "theme"
  • HTML指定: data-mouseover-effect-color
  • 役割: Mouse Over Effect色。
  • 初めて使う人向け: Mouse Over Effectの色です。#040で選んだsolid HEXを渡せます。
  • 不正例: data-mouseover-effect-color="rgb(1,2,3)"
  • 修正例: data-mouseover-effect-color="#ff33cc"
  • 許容値の詳細: theme / HEX。色をUI選択する場合は#040 ColorPickerのsolid RETURNを利用側で渡せる。
  • 具体例: data-mouseover-effect-color="#ff33cc"
  • 設定後の表示/動作: hover Effectが指定色になる。
  • 無効値/Error: TEXTAREA_ACTIVE_EFFECT_COLOR_INVALID等で拒否します。不正設定を黙って別値へ変換しません。
  • 関連/競合: 下記の具体例と各章の優先規則を確認してください。親追従、Validation、Security、Effect依存があるPropertyは単独で判断しません。

3.36 mouseoverEffectDirection

  • 型: enum
  • Runtime Default: "clockwise"
  • HTML指定: data-mouseover-effect-direction
  • 役割: Mouse Over Effect方向。
  • 初めて使う人向け: Mouse Over Effectの進行方向です。neon/spinで意味を持ちます。
  • 不正例: data-mouseover-effect-direction="left"
  • 修正例: data-mouseover-effect-direction="clockwise"
  • 許容値の詳細: clockwise / counterclockwise。#022へdirectionとして渡す。
  • 具体例: data-mouseover-effect-direction="counterclockwise"
  • 設定後の表示/動作: hover Effectが反時計回りになる。
  • 無効値/Error: TEXTAREA_OPTION_ENUM_INVALID等で拒否します。不正設定を黙って別値へ変換しません。
  • 関連/競合: 下記の具体例と各章の優先規則を確認してください。親追従、Validation、Security、Effect依存があるPropertyは単独で判断しません。

3.37 mouseoverEffectSpeed

  • 型: enum
  • Runtime Default: "normal"
  • HTML指定: data-mouseover-effect-speed
  • 役割: Mouse Over Effect速度。
  • 初めて使う人向け: Mouse Over Effectの周期です。blinkやspin等の速度に反映します。
  • 不正例: data-mouseover-effect-speed="turbo"
  • 修正例: data-mouseover-effect-speed="slow"
  • 許容値の詳細: slow / normal / fast。#022へspeedとして渡す。
  • 具体例: data-mouseover-effect-speed="fast"
  • 設定後の表示/動作: hover Effectがfastになる。
  • 無効値/Error: TEXTAREA_OPTION_ENUM_INVALID等で拒否します。不正設定を黙って別値へ変換しません。
  • 関連/競合: 下記の具体例と各章の優先規則を確認してください。親追従、Validation、Security、Effect依存があるPropertyは単独で判断しません。

3.38 securityMaxLength

  • 型: integer
  • Runtime Default: 262144
  • HTML指定: data-security-max-length
  • 役割: Security Gateが受理する文字列長上限。
  • 初めて使う人向け: Validationとは別の強制安全上限です。この文字数を超える値は採用しません。
  • 不正例: data-security-max-length="0"
  • 修正例: data-security-max-length="262144"
  • 許容値の詳細: 1~1048576。maxlengthはこの値以下。既存committedValueより小さくsetOptions不可。
  • 具体例: data-security-max-length="4096"
  • 設定後の表示/動作: 4096文字超のUntrusted/設定値をSecurityで拒否。
  • 無効値/Error: TEXTAREA_SECURITY_LIMIT_INVALID等で拒否します。不正設定を黙って別値へ変換しません。
  • 関連/競合: 下記の具体例と各章の優先規則を確認してください。親追従、Validation、Security、Effect依存があるPropertyは単独で判断しません。

4. Multiline固有Property

4.1 rows / cols — 「文字数」ではなくtextarea属性

  • rows: 1~1000、Default 6。textareaの表示行数hintです。
  • cols: 1~1000、Default 40。textareaの表示列数hintです。
  • #028はwidth / heightをCSSへ明示するため、画面上の最終ピクセルサイズはwidth/heightが優先します。rows/colsを増やしてもheight/widthが固定なら外寸は変わらない場合があります。

[[BF-TEXTAREA-SAMPLE:rows]]

[[BF-TEXTAREA-SAMPLE:cols]]

4.2 wrap 全3値

  • soft — Default。画面では長い行を折り返します。値そのものへ強制改行を追加しません。
  • hard — HTML textareaのhard wrap属性を使います。表示は折り返します。フォーム送信時の改行処理はブラウザ契約です。
  • off — 自動折返しを停止します。横に長い1行を保持するため、scroll=auto/scrollと組み合わせて横スクロールを使います。

[[BF-TEXTAREA-SAMPLE:wrapSoft]]

[[BF-TEXTAREA-SAMPLE:wrapHard]]

[[BF-TEXTAREA-SAMPLE:wrapOff]]

4.3 resize 全4値

  • none — ユーザーリサイズ不可。
  • vertical — 縦だけ。Default。
  • horizontal — 横だけ。
  • both — 縦横両方。

inheritParent=trueでは親100%追従を優先するため、実textareaのresizeはnoneになります。

4.4 scroll 全3値

  • auto — 必要な時だけスクロール。Default。
  • hidden — overflowを隠します。見えない部分があってもスクロールバーを出しません。
  • scroll — スクロール領域を常時確保します。

wrap=offでは横overflowにも同じscroll設定が関係します。

5. Commit契約 — Enterは改行、確定は別操作

5.1 commitShortcut 全4値

  • ctrl-or-meta-enter — Default。Ctrl+Enter / Cmd+Enterのどちらでもcommit。
  • ctrl-enter — Ctrl+Enterだけcommit。
  • meta-enter — Meta/Cmd+Enterだけcommit。
  • none — キーボードショートカットではcommitしません。

Enter単独は全4値で改行です。IME変換中はショートカットcommitを抑止し、日本語変換確定を誤ってcommit扱いしません。

5.2 blurCommit

  • true(Default): 他の要素へ移動した時にcommitを試みます。
  • false: blurしてもeditingValueだけを残し、committedValueを更新しません。

5.3 commitInvalid

  • false(Default): required/minlength/maxlengthに違反した値をcommitしません。
  • true: Validation invalidでもcommitを許可します。
  • Security拒否は必ず拒否します。commitInvalid=trueでSecurityを無効化することはできません。

6. Theme / Appearance / Background

6.1 Theme 全4値

  • default — 標準Bone Flowのsurface/文字/枠/accent。
  • dark — 暗色surface中心。
  • light — 明るいsurfaceと暗い文字。
  • neon — 暗色surfaceにNeon系accent。

backgroundColor=themeならTheme背景を使います。transparentやHEXを指定すると背景だけThemeより優先され、Themeの文字・枠・accentは維持します。

6.2 Appearance

  • normal — 標準枠。Default。
  • flat — 立体感を抑えた外観。
  • borderless — 通常外枠を抑え、周囲のsurfaceへ馴染ませる外観。
  • inherit — 互換入力。内部ではappearance=normal + inheritParent=trueとして扱います。

6.3 Background Color

受理値はtheme / transparent / #RGB / #RGBA / #RRGGBB / #RRGGBBAAです。redやrgb(...)は受理しません。色選択UIが必要なら#040のsolid HEX RETURNを使います。

7. Position 全9値 / inputAlign

Positionは親Previewの利用可能領域を基準にTextArea全体を置きます。Defaultはcenterです。

  • top-left — 左上
  • top-center — 上中央
  • top-right — 右上
  • middle-left — 左中央
  • center — 中央(Default)
  • middle-right — 右中央
  • bottom-left — 左下
  • bottom-center — 下中央
  • bottom-right — 右下

inheritParent=trueではrootが親100%へstretchするため、position指定より親吸着が優先されます。

[[BF-TEXTAREA-SAMPLE:posTopLeft]]

[[BF-TEXTAREA-SAMPLE:posTopCenter]]

[[BF-TEXTAREA-SAMPLE:posTopRight]]

[[BF-TEXTAREA-SAMPLE:posMiddleLeft]]

[[BF-TEXTAREA-SAMPLE:posCenter]]

[[BF-TEXTAREA-SAMPLE:posMiddleRight]]

[[BF-TEXTAREA-SAMPLE:posBottomLeft]]

[[BF-TEXTAREA-SAMPLE:posBottomCenter]]

[[BF-TEXTAREA-SAMPLE:posBottomRight]]

inputAlignは各行の文字寄せです。auto / left / center / right。単体のautoはleft、inheritParent=true + autoでは親text-alignへ追従します。

8. Active Effect / Mouse Over Effect

8.1 Active Effect — focus中だけ

activeBorderEffectは3値だけです。

  • normal — 通常focus枠。追加アニメーションなし。
  • neon — focus中にNeon枠。direction/speedが進行表現に反映されます。
  • blink — focus中に点滅。speedが点滅周期に反映されます。directionによる見た目差はありません。

Directionはclockwise / counterclockwise、Speedはslow=2s / normal=1.2s / fast=0.65sです。focusを外すとActive Effectは解除されます。

8.2 Mouse Over Effect — #022へ委譲

mouseoverBorderEffectは5値です。

  • normal — 追加Effectなし。
  • neon — hover中Neon枠。direction/speedが有効。
  • spin — hover中に光が周回。direction/speedが有効。
  • cross — hover中にcross形状を表示。現在は静止表現なのでdirection/speedによる動きはありません。
  • blink — hover中に点滅。speedが有効、direction差はありません。

#028は#022へeffect / direction / speed / colorを渡し、hover視覚表現そのものは#022が担当します。Active Effectとは別責務なのでfocus中+hover中でも設定を同一Propertyへ上書きしません。

9. #040 ColorPickerとの責務分離

#040は色を選んでsolid HEXを返すUI、#028はその文字列をPropertyへ適用する側です。#028内に別ColorPickerを作りません。

function applyBackground(hex) { BoneTextArea.setOptions(box,{backgroundColor:hex}); }
function applyActive(hex) { BoneTextArea.setOptions(box,{activeEffectColor:hex}); }
function applyHover(hex) { BoneTextArea.setOptions(box,{mouseoverEffectColor:hex}); }

使用先はbackgroundColor / activeEffectColor / mouseoverEffectColorです。gradientはこれらPropertyでは受理しません。

10. Untrusted IN / Security

Securityは「入力ルール」ではなく採用して安全かを確認します。HTML風文字列はHTMLとして実行せず、普通の文字列として扱います。

10.1 許可例

BoneTextArea.applyJointInput(box,{
  source:"joint",
  value:"1行目\n<script>alert(1)</script>",
  state:{status:"connected"}
});

<script>...は実行せず文字として表示・保持します。改行も通常文字として受理します。

10.2 拒否例と値保持

const before=BoneTextArea.getCommittedValue(box);
const result=BoneTextArea.applyJointInput(box,{
  source:"joint",
  value:"A\u0000B",
  state:{status:"connected"}
});
const after=BoneTextArea.getCommittedValue(box);
// result.accepted === false
// after === before

NUL等の危険な制御文字、壊れたUnicodeサロゲート、securityMaxLength超過、getter/Proxy等の安全に読めないObjectは拒否します。拒否後も直前committedValueを維持します。

11. inheritParent

inheritParent=trueは「位置だけ親に合わせる」設定ではありません。親のwidth / height / background / color / border / radius / text-alignへ追従します。

  • root/textareaは親100%へ追従。
  • 単体width / heightより親サイズが優先。
  • resizeはnone。
  • inputAlign=autoなら親text-alignを使う。
  • 親styleを後から変えたらsyncParentStyle()で再読込。

[[BF-TEXTAREA-SAMPLE:inheritParent]]

12. JavaScript専用Callback 全15件

CallbackはHTML属性へJavaScript文字列を書いて実行する仕組みではありません。BoneTextArea.create()等のoptionsへFunctionそのものを渡します。各Callbackは同名のbone-textarea:* Eventと同じ状態変化を通知します。共通payloadとしてcomponentId / componentName / version / boneId / boneTypeが入り、Event固有情報が追加されます。

12.1 onInput

  • 発火: bone-textarea:input と同じRuntime dispatch経路。
  • 共通payload: componentId / componentName / version / boneId / boneType。Event固有detailが追加されます。
  • 状態変化: Callbackは通知経路です。内部DOMを直接書き換える代替ではありません。
  • 設定例: BoneTextArea.create(bone, {onInput: detail => console.log(detail)});

12.2 onChange

  • 発火: bone-textarea:change と同じRuntime dispatch経路。
  • 共通payload: componentId / componentName / version / boneId / boneType。Event固有detailが追加されます。
  • 状態変化: Callbackは通知経路です。内部DOMを直接書き換える代替ではありません。
  • 設定例: BoneTextArea.create(bone, {onChange: detail => console.log(detail)});

12.3 onCommit

  • 発火: bone-textarea:commit と同じRuntime dispatch経路。
  • 共通payload: componentId / componentName / version / boneId / boneType。Event固有detailが追加されます。
  • 状態変化: Callbackは通知経路です。内部DOMを直接書き換える代替ではありません。
  • 設定例: BoneTextArea.create(bone, {onCommit: detail => console.log(detail)});

12.4 onInvalid

  • 発火: bone-textarea:invalid と同じRuntime dispatch経路。
  • 共通payload: componentId / componentName / version / boneId / boneType。Event固有detailが追加されます。
  • 状態変化: Callbackは通知経路です。内部DOMを直接書き換える代替ではありません。
  • 設定例: BoneTextArea.create(bone, {onInvalid: detail => console.log(detail)});

12.5 onFocus

  • 発火: bone-textarea:focus と同じRuntime dispatch経路。
  • 共通payload: componentId / componentName / version / boneId / boneType。Event固有detailが追加されます。
  • 状態変化: Callbackは通知経路です。内部DOMを直接書き換える代替ではありません。
  • 設定例: BoneTextArea.create(bone, {onFocus: detail => console.log(detail)});

12.6 onBlur

  • 発火: bone-textarea:blur と同じRuntime dispatch経路。
  • 共通payload: componentId / componentName / version / boneId / boneType。Event固有detailが追加されます。
  • 状態変化: Callbackは通知経路です。内部DOMを直接書き換える代替ではありません。
  • 設定例: BoneTextArea.create(bone, {onBlur: detail => console.log(detail)});

12.7 onCompositionstart

  • 発火: bone-textarea:compositionstart と同じRuntime dispatch経路。
  • 共通payload: componentId / componentName / version / boneId / boneType。Event固有detailが追加されます。
  • 状態変化: Callbackは通知経路です。内部DOMを直接書き換える代替ではありません。
  • 設定例: BoneTextArea.create(bone, {onCompositionstart: detail => console.log(detail)});

12.8 onCompositionupdate

  • 発火: bone-textarea:compositionupdate と同じRuntime dispatch経路。
  • 共通payload: componentId / componentName / version / boneId / boneType。Event固有detailが追加されます。
  • 状態変化: Callbackは通知経路です。内部DOMを直接書き換える代替ではありません。
  • 設定例: BoneTextArea.create(bone, {onCompositionupdate: detail => console.log(detail)});

12.9 onCompositionend

  • 発火: bone-textarea:compositionend と同じRuntime dispatch経路。
  • 共通payload: componentId / componentName / version / boneId / boneType。Event固有detailが追加されます。
  • 状態変化: Callbackは通知経路です。内部DOMを直接書き換える代替ではありません。
  • 設定例: BoneTextArea.create(bone, {onCompositionend: detail => console.log(detail)});

12.10 onReset

  • 発火: bone-textarea:reset と同じRuntime dispatch経路。
  • 共通payload: componentId / componentName / version / boneId / boneType。Event固有detailが追加されます。
  • 状態変化: Callbackは通知経路です。内部DOMを直接書き換える代替ではありません。
  • 設定例: BoneTextArea.create(bone, {onReset: detail => console.log(detail)});

12.11 onInAccepted

  • 発火: bone-textarea:in-accepted と同じRuntime dispatch経路。
  • 共通payload: componentId / componentName / version / boneId / boneType。Event固有detailが追加されます。
  • 状態変化: Callbackは通知経路です。内部DOMを直接書き換える代替ではありません。
  • 設定例: BoneTextArea.create(bone, {onInAccepted: detail => console.log(detail)});

12.12 onInRejected

  • 発火: bone-textarea:in-rejected と同じRuntime dispatch経路。
  • 共通payload: componentId / componentName / version / boneId / boneType。Event固有detailが追加されます。
  • 状態変化: Callbackは通知経路です。内部DOMを直接書き換える代替ではありません。
  • 設定例: BoneTextArea.create(bone, {onInRejected: detail => console.log(detail)});

12.13 onSecurityRejected

  • 発火: bone-textarea:security-rejected と同じRuntime dispatch経路。
  • 共通payload: componentId / componentName / version / boneId / boneType。Event固有detailが追加されます。
  • 状態変化: Callbackは通知経路です。内部DOMを直接書き換える代替ではありません。
  • 設定例: BoneTextArea.create(bone, {onSecurityRejected: detail => console.log(detail)});

12.14 onDeliveryState

  • 発火: bone-textarea:delivery-state と同じRuntime dispatch経路。
  • 共通payload: componentId / componentName / version / boneId / boneType。Event固有detailが追加されます。
  • 状態変化: Callbackは通知経路です。内部DOMを直接書き換える代替ではありません。
  • 設定例: BoneTextArea.create(bone, {onDeliveryState: detail => console.log(detail)});

12.15 onDelivery

  • 発火: bone-textarea:delivery と同じRuntime dispatch経路。
  • 共通payload: componentId / componentName / version / boneId / boneType。Event固有detailが追加されます。
  • 状態変化: Callbackは通知経路です。内部DOMを直接書き換える代替ではありません。
  • 設定例: BoneTextArea.create(bone, {onDelivery: detail => console.log(detail)});

13. Joint IN

applyJointInput()は#002等から来たpayloadをそのまま信用せず、source / value / stateを安全に読み取ります。受理した場合だけeditingValue / committedValue / Bone.valueを更新します。

  • source — 送信元を示すstring/null。
  • value — 必須string。Security検査対象。
  • state — string、または{status, reason}の通常Object。
  • 受理: bone-textarea:in-accepted。
  • 拒否: bone-textarea:in-rejected。値は直前状態を維持。

14. OUT WAIT / FIFO / BLOCKED

OUTへ送るのはcommittedValueだけです。入力中のeditingValueは送信しません。

14.1 WAIT → FIFO配送

  1. connectOutput(... targetReady:false)でTarget Busy。
  2. Aをcommit → 接続は維持したままWAIT、QueueへA。
  3. Bをcommit → Queueは[A,B]。
  4. setTargetReady(box,true) → A→Bの順で自動配送。
const delivered=[];
BoneTextArea.connectOutput(box,{targetReady:false,deliver:p=>delivered.push(p.value)});
BoneTextArea.setValue(box,"A"); BoneTextArea.commit(box,"demo");
BoneTextArea.setValue(box,"B"); BoneTextArea.commit(box,"demo");
BoneTextArea.setTargetReady(box,true);
// delivered === ["A","B"]

14.2 BLOCKED → 解除

guardが拒否した値はTargetへ配送せず、接続を維持したままBLOCKEDになります。clearOutputBlock()で解除し、安全な次のcommitから配送を再開します。

BoneTextArea.connectOutput(box,{
  targetReady:true,
  guard:p=>p.value==="BLOCK" ? {allowed:false,reason:"security",code:"APP_BLOCK"} : true,
  deliver:p=>console.log(p.value)
});

getOutputState()でwaiting/blocked/ready、getOutputQueue()でQueueを確認します。WAIT/FIFO/BLOCKEDの配送機構自体は#002 Joint責務です。

15. 基本操作 / Focus / IME / 選択

  • クリック/Tabまたはfocus()でfocus。selectOnFocus=trueなら全文選択。
  • 入力でeditingValueが更新され、committedValueとの差があればdirty。
  • Enterは改行。指定ショートカットでcommit。
  • blurCommit=trueならblur時commit。
  • Escapeで未確定編集を破棄。
  • IME compositionstart~compositionend中はショートカットcommitを抑止。
  • select() / setSelectionRange() / getSelection()で選択範囲を操作。
  • reset()でeditingValueをcommittedValueへ戻す。

16. Event / Callback

Runtimeは状態変化をbone-textarea:<event>というDOM Eventとして実TextArea rootから通知します。Eventは親DOMへも伝播するため、個別Runtimeまたは上位Containerで監視できます。Callbackは同じ状態変化をFunctionで直接受け取る別経路です。

主なEvent: input / change / commit / invalid / focus / blur / compositionstart / compositionupdate / compositionend / reset / in-accepted / in-rejected / security-rejected / delivery-state / delivery。

17. Public API 全35件

17.1 defaults()

  • 用途: 38 PropertyのDefault cloneを返す。
  • 引数: なし。
  • 戻り値: Object。
  • 使用場面: 設定UI初期化。
  • 状態/DOM: 実BoneTextArea v1.0.13の正式API経路で取得・更新します。内部DOMを直接操作する代替ではありません。
  • Error/拒否: 不正なinstance/value/options/依存は実Runtimeが定義する具体的なError Codeで拒否され、可能な限り既存状態を保持します。
  • 使用例: const defaults = BoneTextArea.defaults();
  • 確認方法: 呼出し後は、そのAPIが変える対象をgetState() / getValue() / getEditingValue() / getOutputState()等の公開取得APIで読み返し、直接DOMを書き換えて確認しません。

17.2 normalizeOptions(options)

  • 用途: HTML/JavaScriptで指定した設定Objectを、TextAreaが使える型・範囲・列挙値・相互条件か検査し、正式な設定Objectへ変換。
  • 引数: options: 通常のJavaScript Object。
  • 戻り値: Object。
  • 使用場面: create/setOptions前の検証。
  • 状態/DOM: 実BoneTextArea v1.0.13の正式API経路で取得・更新します。内部DOMを直接操作する代替ではありません。
  • Error/拒否: 不正なinstance/value/options/依存は実Runtimeが定義する具体的なError Codeで拒否され、可能な限り既存状態を保持します。
  • 使用例: BoneTextArea.normalizeOptions({rows:10,wrap:"soft"});
  • 確認方法: 呼出し後は、そのAPIが変える対象をgetState() / getValue() / getEditingValue() / getOutputState()等の公開取得APIで読み返し、直接DOMを書き換えて確認しません。

17.3 validateValue(value, options)

  • 用途: 値をrequired/min/max/security条件で検証。
  • 引数: value, options。
  • 戻り値: Validation Object。
  • 使用場面: DOMを作らず値検証。
  • 状態/DOM: 実BoneTextArea v1.0.13の正式API経路で取得・更新します。内部DOMを直接操作する代替ではありません。
  • Error/拒否: 不正なinstance/value/options/依存は実Runtimeが定義する具体的なError Codeで拒否され、可能な限り既存状態を保持します。
  • 使用例: BoneTextArea.validateValue("A\nB", {required:true});
  • 確認方法: 呼出し後は、そのAPIが変える対象をgetState() / getValue() / getEditingValue() / getOutputState()等の公開取得APIで読み返し、直接DOMを書き換えて確認しません。

17.4 inspectUntrustedText(value, limit)

  • 用途: 外部由来の文字列を、長さ・制御文字・Unicode破損等の安全条件で検査。
  • 引数: value, limit。
  • 戻り値: Inspection Object。
  • 使用場面: Joint IN前Security確認。
  • 状態/DOM: 実BoneTextArea v1.0.13の正式API経路で取得・更新します。内部DOMを直接操作する代替ではありません。
  • Error/拒否: 不正なinstance/value/options/依存は実Runtimeが定義する具体的なError Codeで拒否され、可能な限り既存状態を保持します。
  • 使用例: BoneTextArea.inspectUntrustedText("A\nB", 1024);
  • 確認方法: 呼出し後は、そのAPIが変える対象をgetState() / getValue() / getEditingValue() / getOutputState()等の公開取得APIで読み返し、直接DOMを書き換えて確認しません。

17.5 create(boneInput, options)

  • 用途: 実TextArea rootを生成。
  • 引数: boneInput, options。
  • 戻り値: HTMLElement。
  • 使用場面: Runtime instance生成。
  • 状態/DOM: 実BoneTextArea v1.0.13の正式API経路で取得・更新します。内部DOMを直接操作する代替ではありません。
  • Error/拒否: 不正なinstance/value/options/依存は実Runtimeが定義する具体的なError Codeで拒否され、可能な限り既存状態を保持します。
  • 使用例: const box = BoneTextArea.create(bone, {rows:8});
  • 確認方法: 呼出し後は、そのAPIが変える対象をgetState() / getValue() / getEditingValue() / getOutputState()等の公開取得APIで読み返し、直接DOMを書き換えて確認しません。

17.6 isInstance(element)

  • 用途: Runtime管理instanceか判定。
  • 引数: element。
  • 戻り値: boolean。
  • 使用場面: API呼出し前確認。
  • 状態/DOM: 実BoneTextArea v1.0.13の正式API経路で取得・更新します。内部DOMを直接操作する代替ではありません。
  • Error/拒否: 不正なinstance/value/options/依存は実Runtimeが定義する具体的なError Codeで拒否され、可能な限り既存状態を保持します。
  • 使用例: BoneTextArea.isInstance(box);
  • 確認方法: 呼出し後は、そのAPIが変える対象をgetState() / getValue() / getEditingValue() / getOutputState()等の公開取得APIで読み返し、直接DOMを書き換えて確認しません。

17.7 getInput(element)

  • 用途: 内部textareaを取得。
  • 引数: instance root。
  • 戻り値: HTMLTextAreaElement。
  • 使用場面: selection/focus等の参照。
  • 状態/DOM: 実BoneTextArea v1.0.13の正式API経路で取得・更新します。内部DOMを直接操作する代替ではありません。
  • Error/拒否: 不正なinstance/value/options/依存は実Runtimeが定義する具体的なError Codeで拒否され、可能な限り既存状態を保持します。
  • 使用例: const ta = BoneTextArea.getInput(box);
  • 確認方法: 呼出し後は、そのAPIが変える対象をgetState() / getValue() / getEditingValue() / getOutputState()等の公開取得APIで読み返し、直接DOMを書き換えて確認しません。

17.8 getValue(element)

  • 用途: committedValue取得。
  • 引数: instance root。
  • 戻り値: string。
  • 使用場面: 確定値参照。
  • 状態/DOM: 実BoneTextArea v1.0.13の正式API経路で取得・更新します。内部DOMを直接操作する代替ではありません。
  • Error/拒否: 不正なinstance/value/options/依存は実Runtimeが定義する具体的なError Codeで拒否され、可能な限り既存状態を保持します。
  • 使用例: BoneTextArea.getValue(box);
  • 確認方法: 呼出し後は、そのAPIが変える対象をgetState() / getValue() / getEditingValue() / getOutputState()等の公開取得APIで読み返し、直接DOMを書き換えて確認しません。

17.9 getEditingValue(element)

  • 用途: 編集中値取得。
  • 引数: instance root。
  • 戻り値: string。
  • 使用場面: 未commit値参照。
  • 状態/DOM: 実BoneTextArea v1.0.13の正式API経路で取得・更新します。内部DOMを直接操作する代替ではありません。
  • Error/拒否: 不正なinstance/value/options/依存は実Runtimeが定義する具体的なError Codeで拒否され、可能な限り既存状態を保持します。
  • 使用例: BoneTextArea.getEditingValue(box);
  • 確認方法: 呼出し後は、そのAPIが変える対象をgetState() / getValue() / getEditingValue() / getOutputState()等の公開取得APIで読み返し、直接DOMを書き換えて確認しません。

17.10 getCommittedValue(element)

  • 用途: 確定値取得。
  • 引数: instance root。
  • 戻り値: string。
  • 使用場面: commit状態確認。
  • 状態/DOM: 実BoneTextArea v1.0.13の正式API経路で取得・更新します。内部DOMを直接操作する代替ではありません。
  • Error/拒否: 不正なinstance/value/options/依存は実Runtimeが定義する具体的なError Codeで拒否され、可能な限り既存状態を保持します。
  • 使用例: BoneTextArea.getCommittedValue(box);
  • 確認方法: 呼出し後は、そのAPIが変える対象をgetState() / getValue() / getEditingValue() / getOutputState()等の公開取得APIで読み返し、直接DOMを書き換えて確認しません。

17.11 getBone(element)

  • 用途: 現在Bone clone取得。
  • 引数: instance root。
  • 戻り値: Object。
  • 使用場面: id/type/value確認。
  • 状態/DOM: 実BoneTextArea v1.0.13の正式API経路で取得・更新します。内部DOMを直接操作する代替ではありません。
  • Error/拒否: 不正なinstance/value/options/依存は実Runtimeが定義する具体的なError Codeで拒否され、可能な限り既存状態を保持します。
  • 使用例: BoneTextArea.getBone(box);
  • 確認方法: 呼出し後は、そのAPIが変える対象をgetState() / getValue() / getEditingValue() / getOutputState()等の公開取得APIで読み返し、直接DOMを書き換えて確認しません。

17.12 getOptions(element)

  • 用途: 正規化済みProperty取得。
  • 引数: instance root。
  • 戻り値: Object。
  • 使用場面: 現在設定確認。
  • 状態/DOM: 実BoneTextArea v1.0.13の正式API経路で取得・更新します。内部DOMを直接操作する代替ではありません。
  • Error/拒否: 不正なinstance/value/options/依存は実Runtimeが定義する具体的なError Codeで拒否され、可能な限り既存状態を保持します。
  • 使用例: BoneTextArea.getOptions(box);
  • 確認方法: 呼出し後は、そのAPIが変える対象をgetState() / getValue() / getEditingValue() / getOutputState()等の公開取得APIで読み返し、直接DOMを書き換えて確認しません。

17.13 getState(element)

  • 用途: 編集/Validation/Delivery/Multiline/Effect状態取得。
  • 引数: instance root。
  • 戻り値: Object。
  • 使用場面: 状態表示・診断。
  • 状態/DOM: 実BoneTextArea v1.0.13の正式API経路で取得・更新します。内部DOMを直接操作する代替ではありません。
  • Error/拒否: 不正なinstance/value/options/依存は実Runtimeが定義する具体的なError Codeで拒否され、可能な限り既存状態を保持します。
  • 使用例: BoneTextArea.getState(box);
  • 確認方法: 呼出し後は、そのAPIが変える対象をgetState() / getValue() / getEditingValue() / getOutputState()等の公開取得APIで読み返し、直接DOMを書き換えて確認しません。

17.14 setValue(element,value,options)

  • 用途: editing/committed値を安全にAPI設定。
  • 引数: element,value,options。
  • 戻り値: string。
  • 使用場面: 外部値設定。
  • 状態/DOM: 実BoneTextArea v1.0.13の正式API経路で取得・更新します。内部DOMを直接操作する代替ではありません。
  • Error/拒否: 不正なinstance/value/options/依存は実Runtimeが定義する具体的なError Codeで拒否され、可能な限り既存状態を保持します。
  • 使用例: BoneTextArea.setValue(box,"A\nB",{emit:false});
  • 確認方法: 呼出し後は、そのAPIが変える対象をgetState() / getValue() / getEditingValue() / getOutputState()等の公開取得APIで読み返し、直接DOMを書き換えて確認しません。

17.15 setOptions(element,patch)

  • 用途: Property patchを再正規化して適用。
  • 引数: element,patch。
  • 戻り値: Object。
  • 使用場面: 動的設定変更。
  • 状態/DOM: 実BoneTextArea v1.0.13の正式API経路で取得・更新します。内部DOMを直接操作する代替ではありません。
  • Error/拒否: 不正なinstance/value/options/依存は実Runtimeが定義する具体的なError Codeで拒否され、可能な限り既存状態を保持します。
  • 使用例: BoneTextArea.setOptions(box,{rows:12,wrap:"off"});
  • 確認方法: 呼出し後は、そのAPIが変える対象をgetState() / getValue() / getEditingValue() / getOutputState()等の公開取得APIで読み返し、直接DOMを書き換えて確認しません。

17.16 applyBone(element,boneInput)

  • 用途: Bone入力を正規化して適用。
  • 引数: element,boneInput。
  • 戻り値: Object。
  • 使用場面: Bone契約更新。
  • 状態/DOM: 実BoneTextArea v1.0.13の正式API経路で取得・更新します。内部DOMを直接操作する代替ではありません。
  • Error/拒否: 不正なinstance/value/options/依存は実Runtimeが定義する具体的なError Codeで拒否され、可能な限り既存状態を保持します。
  • 使用例: BoneTextArea.applyBone(box,{id:"x",type:"TEXTAREA",value:"A\nB"});
  • 確認方法: 呼出し後は、そのAPIが変える対象をgetState() / getValue() / getEditingValue() / getOutputState()等の公開取得APIで読み返し、直接DOMを書き換えて確認しません。

17.17 applyJointInput(element,payload)

  • 用途: Untrusted Joint INを安全検査し受理/拒否。
  • 引数: element,payload。
  • 戻り値: Result Object。
  • 使用場面: #002 IN受信。
  • 状態/DOM: 実BoneTextArea v1.0.13の正式API経路で取得・更新します。内部DOMを直接操作する代替ではありません。
  • Error/拒否: 不正なinstance/value/options/依存は実Runtimeが定義する具体的なError Codeで拒否され、可能な限り既存状態を保持します。
  • 使用例: BoneTextArea.applyJointInput(box,{source:"joint",value:"A\nB",state:{status:"connected"}});
  • 確認方法: 呼出し後は、そのAPIが変える対象をgetState() / getValue() / getEditingValue() / getOutputState()等の公開取得APIで読み返し、直接DOMを書き換えて確認しません。

17.18 buildOutput(element,source)

  • 用途: 確定値からOUT payload構築。
  • 引数: element,source。
  • 戻り値: Object。
  • 使用場面: 配送前payload確認。
  • 状態/DOM: 実BoneTextArea v1.0.13の正式API経路で取得・更新します。内部DOMを直接操作する代替ではありません。
  • Error/拒否: 不正なinstance/value/options/依存は実Runtimeが定義する具体的なError Codeで拒否され、可能な限り既存状態を保持します。
  • 使用例: BoneTextArea.buildOutput(box,"user");
  • 確認方法: 呼出し後は、そのAPIが変える対象をgetState() / getValue() / getEditingValue() / getOutputState()等の公開取得APIで読み返し、直接DOMを書き換えて確認しません。

17.19 connectOutput(element,options)

  • 用途: #002 Delivery Channel接続。
  • 引数: element,{targetReady,guard,deliver,onStateChange}。
  • 戻り値: State。
  • 使用場面: WAIT/FIFO/BLOCKED接続。
  • 状態/DOM: 実BoneTextArea v1.0.13の正式API経路で取得・更新します。内部DOMを直接操作する代替ではありません。
  • Error/拒否: 不正なinstance/value/options/依存は実Runtimeが定義する具体的なError Codeで拒否され、可能な限り既存状態を保持します。
  • 使用例: BoneTextArea.connectOutput(box,{targetReady:false,deliver:p=>console.log(p.value)});
  • 確認方法: 呼出し後は、そのAPIが変える対象をgetState() / getValue() / getEditingValue() / getOutputState()等の公開取得APIで読み返し、直接DOMを書き換えて確認しません。

17.20 disconnectOutput(element)

  • 用途: Delivery Channelをdispose。
  • 引数: element。
  • 戻り値: boolean。
  • 使用場面: OUT切断。
  • 状態/DOM: 実BoneTextArea v1.0.13の正式API経路で取得・更新します。内部DOMを直接操作する代替ではありません。
  • Error/拒否: 不正なinstance/value/options/依存は実Runtimeが定義する具体的なError Codeで拒否され、可能な限り既存状態を保持します。
  • 使用例: BoneTextArea.disconnectOutput(box);
  • 確認方法: 呼出し後は、そのAPIが変える対象をgetState() / getValue() / getEditingValue() / getOutputState()等の公開取得APIで読み返し、直接DOMを書き換えて確認しません。

17.21 setTargetReady(element,ready)

  • 用途: Target Ready状態を#002へ反映。
  • 引数: element,boolean。
  • 戻り値: State。
  • 使用場面: WAIT解除/FIFO配送。
  • 状態/DOM: 実BoneTextArea v1.0.13の正式API経路で取得・更新します。内部DOMを直接操作する代替ではありません。
  • Error/拒否: 不正なinstance/value/options/依存は実Runtimeが定義する具体的なError Codeで拒否され、可能な限り既存状態を保持します。
  • 使用例: BoneTextArea.setTargetReady(box,true);
  • 確認方法: 呼出し後は、そのAPIが変える対象をgetState() / getValue() / getEditingValue() / getOutputState()等の公開取得APIで読み返し、直接DOMを書き換えて確認しません。

17.22 clearOutputBlock(element)

  • 用途: BLOCK解除。
  • 引数: #002接続済element。
  • 戻り値: State。
  • 使用場面: BLOCK解除。
  • 状態/DOM: 実BoneTextArea v1.0.13の正式API経路で取得・更新します。内部DOMを直接操作する代替ではありません。
  • Error/拒否: 不正なinstance/value/options/依存は実Runtimeが定義する具体的なError Codeで拒否され、可能な限り既存状態を保持します。
  • 使用例: BoneTextArea.clearOutputBlock(box);
  • 確認方法: 呼出し後は、そのAPIが変える対象をgetState() / getValue() / getEditingValue() / getOutputState()等の公開取得APIで読み返し、直接DOMを書き換えて確認しません。

17.23 getOutputState(element)

  • 用途: Delivery state/queue数取得。
  • 引数: element。
  • 戻り値: Object。
  • 使用場面: READY/WAIT/BLOCKED確認。
  • 状態/DOM: 実BoneTextArea v1.0.13の正式API経路で取得・更新します。内部DOMを直接操作する代替ではありません。
  • Error/拒否: 不正なinstance/value/options/依存は実Runtimeが定義する具体的なError Codeで拒否され、可能な限り既存状態を保持します。
  • 使用例: BoneTextArea.getOutputState(box);
  • 確認方法: 呼出し後は、そのAPIが変える対象をgetState() / getValue() / getEditingValue() / getOutputState()等の公開取得APIで読み返し、直接DOMを書き換えて確認しません。

17.24 getOutputQueue(element)

  • 用途: 待機Queue clone取得。
  • 引数: element。
  • 戻り値: Array。
  • 使用場面: FIFO待機内容確認。
  • 状態/DOM: 実BoneTextArea v1.0.13の正式API経路で取得・更新します。内部DOMを直接操作する代替ではありません。
  • Error/拒否: 不正なinstance/value/options/依存は実Runtimeが定義する具体的なError Codeで拒否され、可能な限り既存状態を保持します。
  • 使用例: BoneTextArea.getOutputQueue(box);
  • 確認方法: 呼出し後は、そのAPIが変える対象をgetState() / getValue() / getEditingValue() / getOutputState()等の公開取得APIで読み返し、直接DOMを書き換えて確認しません。

17.25 commit(element,source)

  • 用途: editingValueをValidation後commitしOUT配送。
  • 引数: element,source。
  • 戻り値: Commit Result。
  • 使用場面: Ctrl/Cmd+Enter/blur/API確定。
  • 状態/DOM: 実BoneTextArea v1.0.13の正式API経路で取得・更新します。内部DOMを直接操作する代替ではありません。
  • Error/拒否: 不正なinstance/value/options/依存は実Runtimeが定義する具体的なError Codeで拒否され、可能な限り既存状態を保持します。
  • 使用例: BoneTextArea.commit(box,"api");
  • 確認方法: 呼出し後は、そのAPIが変える対象をgetState() / getValue() / getEditingValue() / getOutputState()等の公開取得APIで読み返し、直接DOMを書き換えて確認しません。

17.26 reset(element)

  • 用途: editingValueをcommittedValueへ戻す。
  • 引数: element。
  • 戻り値: string。
  • 使用場面: 未確定編集取消。
  • 状態/DOM: 実BoneTextArea v1.0.13の正式API経路で取得・更新します。内部DOMを直接操作する代替ではありません。
  • Error/拒否: 不正なinstance/value/options/依存は実Runtimeが定義する具体的なError Codeで拒否され、可能な限り既存状態を保持します。
  • 使用例: BoneTextArea.reset(box);
  • 確認方法: 呼出し後は、そのAPIが変える対象をgetState() / getValue() / getEditingValue() / getOutputState()等の公開取得APIで読み返し、直接DOMを書き換えて確認しません。

17.27 validate(element)

  • 用途: 現在editingValueを再Validation。
  • 引数: element。
  • 戻り値: Validation Object。
  • 使用場面: Validation再評価。
  • 状態/DOM: 実BoneTextArea v1.0.13の正式API経路で取得・更新します。内部DOMを直接操作する代替ではありません。
  • Error/拒否: 不正なinstance/value/options/依存は実Runtimeが定義する具体的なError Codeで拒否され、可能な限り既存状態を保持します。
  • 使用例: BoneTextArea.validate(box);
  • 確認方法: 呼出し後は、そのAPIが変える対象をgetState() / getValue() / getEditingValue() / getOutputState()等の公開取得APIで読み返し、直接DOMを書き換えて確認しません。

17.28 focus(element)

  • 用途: 内部textareaへfocus。
  • 引数: element。
  • 戻り値: void。
  • 使用場面: focus制御。
  • 状態/DOM: 実BoneTextArea v1.0.13の正式API経路で取得・更新します。内部DOMを直接操作する代替ではありません。
  • Error/拒否: 不正なinstance/value/options/依存は実Runtimeが定義する具体的なError Codeで拒否され、可能な限り既存状態を保持します。
  • 使用例: BoneTextArea.focus(box);
  • 確認方法: 呼出し後は、そのAPIが変える対象をgetState() / getValue() / getEditingValue() / getOutputState()等の公開取得APIで読み返し、直接DOMを書き換えて確認しません。

17.29 blur(element)

  • 用途: 内部textareaをblur。
  • 引数: element。
  • 戻り値: void。
  • 使用場面: blur制御。
  • 状態/DOM: 実BoneTextArea v1.0.13の正式API経路で取得・更新します。内部DOMを直接操作する代替ではありません。
  • Error/拒否: 不正なinstance/value/options/依存は実Runtimeが定義する具体的なError Codeで拒否され、可能な限り既存状態を保持します。
  • 使用例: BoneTextArea.blur(box);
  • 確認方法: 呼出し後は、そのAPIが変える対象をgetState() / getValue() / getEditingValue() / getOutputState()等の公開取得APIで読み返し、直接DOMを書き換えて確認しません。

17.30 select(element)

  • 用途: 内部textarea全文選択。
  • 引数: element。
  • 戻り値: void。
  • 使用場面: 編集支援。
  • 状態/DOM: 実BoneTextArea v1.0.13の正式API経路で取得・更新します。内部DOMを直接操作する代替ではありません。
  • Error/拒否: 不正なinstance/value/options/依存は実Runtimeが定義する具体的なError Codeで拒否され、可能な限り既存状態を保持します。
  • 使用例: BoneTextArea.select(box);
  • 確認方法: 呼出し後は、そのAPIが変える対象をgetState() / getValue() / getEditingValue() / getOutputState()等の公開取得APIで読み返し、直接DOMを書き換えて確認しません。

17.31 setSelectionRange(element,start,end,direction)

  • 用途: 選択範囲を設定。
  • 引数: element,start,end,direction。
  • 戻り値: void。
  • 使用場面: カーソル/範囲制御。
  • 状態/DOM: 実BoneTextArea v1.0.13の正式API経路で取得・更新します。内部DOMを直接操作する代替ではありません。
  • Error/拒否: 不正なinstance/value/options/依存は実Runtimeが定義する具体的なError Codeで拒否され、可能な限り既存状態を保持します。
  • 使用例: BoneTextArea.setSelectionRange(box,0,3,"forward");
  • 確認方法: 呼出し後は、そのAPIが変える対象をgetState() / getValue() / getEditingValue() / getOutputState()等の公開取得APIで読み返し、直接DOMを書き換えて確認しません。

17.32 getSelection(element)

  • 用途: selection取得。
  • 引数: element。
  • 戻り値: Object。
  • 使用場面: 選択状態取得。
  • 状態/DOM: 実BoneTextArea v1.0.13の正式API経路で取得・更新します。内部DOMを直接操作する代替ではありません。
  • Error/拒否: 不正なinstance/value/options/依存は実Runtimeが定義する具体的なError Codeで拒否され、可能な限り既存状態を保持します。
  • 使用例: BoneTextArea.getSelection(box);
  • 確認方法: 呼出し後は、そのAPIが変える対象をgetState() / getValue() / getEditingValue() / getOutputState()等の公開取得APIで読み返し、直接DOMを書き換えて確認しません。

17.33 setFeedback(element,feedback)

  • 用途: 任意feedback表示設定。
  • 引数: element,通常のJavaScript Object。
  • 戻り値: Object。
  • 使用場面: 利用側メッセージ表示。
  • 状態/DOM: 実BoneTextArea v1.0.13の正式API経路で取得・更新します。内部DOMを直接操作する代替ではありません。
  • Error/拒否: 不正なinstance/value/options/依存は実Runtimeが定義する具体的なError Codeで拒否され、可能な限り既存状態を保持します。
  • 使用例: BoneTextArea.setFeedback(box,{level:"warning",message:"確認"});
  • 確認方法: 呼出し後は、そのAPIが変える対象をgetState() / getValue() / getEditingValue() / getOutputState()等の公開取得APIで読み返し、直接DOMを書き換えて確認しません。

17.34 syncParentStyle(element)

  • 用途: inheritParent時の親style再同期。
  • 引数: element。
  • 戻り値: Object/null。
  • 使用場面: 親style変更後同期。
  • 状態/DOM: 実BoneTextArea v1.0.13の正式API経路で取得・更新します。内部DOMを直接操作する代替ではありません。
  • Error/拒否: 不正なinstance/value/options/依存は実Runtimeが定義する具体的なError Codeで拒否され、可能な限り既存状態を保持します。
  • 使用例: BoneTextArea.syncParentStyle(box);
  • 確認方法: 呼出し後は、そのAPIが変える対象をgetState() / getValue() / getEditingValue() / getOutputState()等の公開取得APIで読み返し、直接DOMを書き換えて確認しません。

17.35 destroy(element)

  • 用途: Delivery/#022を解放しDOM削除。
  • 引数: element。
  • 戻り値: true。
  • 使用場面: EXIT/破棄。
  • 状態/DOM: 実BoneTextArea v1.0.13の正式API経路で取得・更新します。内部DOMを直接操作する代替ではありません。
  • Error/拒否: 不正なinstance/value/options/依存は実Runtimeが定義する具体的なError Codeで拒否され、可能な限り既存状態を保持します。
  • 使用例: BoneTextArea.destroy(box);
  • 確認方法: 呼出し後は、そのAPIが変える対象をgetState() / getValue() / getEditingValue() / getOutputState()等の公開取得APIで読み返し、直接DOMを書き換えて確認しません。

18. Error Code

18.1 Runtime Error 全42件

TEXTAREA_UNTRUSTED_RECORD_INVALID

  • 意味: Untrusted入力のSecurity検査で拒否されました。
  • 発生経路: inspectUntrustedText/applyJointInput/setValue
  • 不正例: applyJointInput(box, [])
  • 正しい例/対処: {source:"joint",value:"ABC",state:{status:"connected"}}
  • 影響: 拒否時は直前committedValueを保持し、HTML風文字列はHTML実行せず文字列として扱います。

TEXTAREA_UNTRUSTED_PROPERTY_TRAP

  • 意味: Untrusted入力のSecurity検査で拒否されました。
  • 発生経路: inspectUntrustedText/applyJointInput/setValue
  • 不正例: ProxyでgetOwnPropertyDescriptorがthrowするpayload
  • 正しい例/対処: 通常のdata-only Objectを渡す
  • 影響: 拒否時は直前committedValueを保持し、HTML風文字列はHTML実行せず文字列として扱います。

TEXTAREA_UNTRUSTED_PROPERTY_MISSING

  • 意味: Untrusted入力のSecurity検査で拒否されました。
  • 発生経路: inspectUntrustedText/applyJointInput/setValue
  • 不正例: Joint INに必須valueがない
  • 正しい例/対処: value:"ABC"を含める
  • 影響: 拒否時は直前committedValueを保持し、HTML風文字列はHTML実行せず文字列として扱います。

TEXTAREA_UNTRUSTED_ACCESSOR_REJECTED

  • 意味: Untrusted入力のSecurity検査で拒否されました。
  • 発生経路: inspectUntrustedText/applyJointInput/setValue
  • 不正例: valueをgetterで定義する
  • 正しい例/対処: valueを通常data propertyのstringにする
  • 影響: 拒否時は直前committedValueを保持し、HTML風文字列はHTML実行せず文字列として扱います。

TEXTAREA_VALUE_TYPE_REJECTED

  • 意味: Untrusted入力のSecurity検査で拒否されました。
  • 発生経路: inspectUntrustedText/applyJointInput/setValue
  • 不正例: setValue(box,{x:1})
  • 正しい例/対処: setValue(box,"ABC")
  • 影響: 拒否時は直前committedValueを保持し、HTML風文字列はHTML実行せず文字列として扱います。

TEXTAREA_SECURITY_LENGTH_EXCEEDED

  • 意味: Untrusted入力のSecurity検査で拒否されました。
  • 発生経路: inspectUntrustedText/applyJointInput/setValue
  • 不正例: securityMaxLength=8へ9文字を渡す
  • 正しい例/対処: 8文字以下にするか安全上限を適切に上げる
  • 影響: 拒否時は直前committedValueを保持し、HTML風文字列はHTML実行せず文字列として扱います。

TEXTAREA_CONTROL_CHARACTER_REJECTED

  • 意味: Untrusted入力のSecurity検査で拒否されました。
  • 発生経路: inspectUntrustedText/applyJointInput/setValue
  • 不正例: "A\u0000B"
  • 正しい例/対処: NUL等の拒否制御文字を除去する
  • 影響: 拒否時は直前committedValueを保持し、HTML風文字列はHTML実行せず文字列として扱います。

TEXTAREA_UNPAIRED_SURROGATE_REJECTED

  • 意味: Untrusted入力のSecurity検査で拒否されました。
  • 発生経路: inspectUntrustedText/applyJointInput/setValue
  • 不正例: 単独high surrogateを含むstring
  • 正しい例/対処: 正しいUnicode文字列へ直す
  • 影響: 拒否時は直前committedValueを保持し、HTML風文字列はHTML実行せず文字列として扱います。

TEXTAREA_LENGTH_INVALID

  • 意味: Propertyの型・範囲・列挙値・相互条件が不正です。
  • 発生経路: normalizeOptions/create/setOptions
  • 不正例: minlength=1.5
  • 正しい例/対処: minlength=1等の0以上整数
  • 影響: 不正optionsを黙って採用しません。

TEXTAREA_INTEGER_RANGE_INVALID

  • 意味: Propertyの型・範囲・列挙値・相互条件が不正です。
  • 発生経路: normalizeOptions/create/setOptions
  • 不正例: rows=0 / cols=1001
  • 正しい例/対処: rows/colsを1~1000整数へ直す
  • 影響: 不正optionsを黙って採用しません。

TEXTAREA_SECURITY_LIMIT_INVALID

  • 意味: Propertyの型・範囲・列挙値・相互条件が不正です。
  • 発生経路: normalizeOptions/create/setOptions
  • 不正例: securityMaxLength=0
  • 正しい例/対処: 1~1048576整数へ直す
  • 影響: 不正optionsを黙って採用しません。

TEXTAREA_OPTION_TYPE_INVALID

  • 意味: Propertyの型・範囲・列挙値・相互条件が不正です。
  • 発生経路: normalizeOptions/create/setOptions
  • 不正例: theme=123 / placeholder={}等
  • 正しい例/対処: Propertyごとの正式primitive型へ直す
  • 影響: 不正optionsを黙って採用しません。

TEXTAREA_OPTION_ENUM_INVALID

  • 意味: Propertyの型・範囲・列挙値・相互条件が不正です。
  • 発生経路: normalizeOptions/create/setOptions
  • 不正例: wrap="nowrap" / position="upper"
  • 正しい例/対処: 各Propertyの列挙値から選ぶ
  • 影響: 不正optionsを黙って採用しません。

TEXTAREA_BACKGROUND_COLOR_INVALID

  • 意味: Propertyの型・範囲・列挙値・相互条件が不正です。
  • 発生経路: normalizeOptions/create/setOptions
  • 不正例: backgroundColor="red"
  • 正しい例/対処: theme / transparent / HEXを使う
  • 影響: 不正optionsを黙って採用しません。

TEXTAREA_ACTIVE_EFFECT_COLOR_INVALID

  • 意味: Propertyの型・範囲・列挙値・相互条件が不正です。
  • 発生経路: normalizeOptions/create/setOptions
  • 不正例: activeEffectColor="rgb(1,2,3)"
  • 正しい例/対処: themeまたはHEXを使う
  • 影響: 不正optionsを黙って採用しません。

TEXTAREA_SIZE_INVALID

  • 意味: Propertyの型・範囲・列挙値・相互条件が不正です。
  • 発生経路: normalizeOptions/create/setOptions
  • 不正例: width=20 / height=20
  • 正しい例/対処: width 40~4000、height 48~2000へ直す
  • 影響: 不正optionsを黙って採用しません。

TEXTAREA_OPTIONS_INVALID

  • 意味: Propertyの型・範囲・列挙値・相互条件が不正です。
  • 発生経路: normalizeOptions/create/setOptions
  • 不正例: setOptions(box,[])
  • 正しい例/対処: 通常のJavaScript Objectを渡す
  • 影響: 不正optionsを黙って採用しません。

TEXTAREA_MAXLENGTH_SECURITY_RANGE

  • 意味: Propertyの型・範囲・列挙値・相互条件が不正です。
  • 発生経路: normalizeOptions/create/setOptions
  • 不正例: maxlength=200, securityMaxLength=100
  • 正しい例/対処: maxlength<=securityMaxLengthにする
  • 影響: 不正optionsを黙って採用しません。

TEXTAREA_LENGTH_RANGE_INVALID

  • 意味: Propertyの型・範囲・列挙値・相互条件が不正です。
  • 発生経路: normalizeOptions/create/setOptions
  • 不正例: minlength=10,maxlength=5
  • 正しい例/対処: minlength<=maxlengthにする
  • 影響: 不正optionsを黙って採用しません。

TEXTAREA_DEPENDENCY_CORE_MISSING

  • 意味: 必要な依存Runtime/APIがない、または互換条件を満たしていません。
  • 発生経路: createまたはEffect初期化時
  • 不正例: #001 BoneCore未読込でcreate
  • 正しい例/対処: #001正式Runtimeを先に読み込む
  • 影響: 依存不足のままinstance生成/Effect更新は行いません。

TEXTAREA_DEPENDENCY_JOINT_MISSING

  • 意味: 必要な依存Runtime/APIがない、または互換条件を満たしていません。
  • 発生経路: createまたはEffect初期化時
  • 不正例: #002 BoneJoint未読込でcreate
  • 正しい例/対処: #002正式Runtimeを先に読み込む
  • 影響: 依存不足のままinstance生成/Effect更新は行いません。

TEXTAREA_BONE_INPUT_INVALID

  • 意味: Bone入力契約が不正です。
  • 発生経路: create/applyBone
  • 不正例: create([],options)
  • 正しい例/対処: {id:"x",type:"TEXTAREA",value:""}等のBone Object
  • 影響: 不正Boneをinstanceへ適用しません。

TEXTAREA_BONE_ID_TYPE_INVALID

  • 意味: Bone入力契約が不正です。
  • 発生経路: create/applyBone
  • 不正例: {id:1,type:"TEXTAREA",value:"A"}
  • 正しい例/対処: id/typeをstringへ直す
  • 影響: 不正Boneをinstanceへ適用しません。

TEXTAREA_JOINT_STATE_INVALID

  • 意味: Joint IN/state/source契約が不正です。
  • 発生経路: applyJointInput
  • 不正例: state:[]
  • 正しい例/対処: state:"connected"または{status:"connected"}
  • 影響: INをBLOCKEDとして拒否し直前committedValueを保持します。

TEXTAREA_JOINT_STATE_STATUS_INVALID

  • 意味: Joint IN/state/source契約が不正です。
  • 発生経路: applyJointInput
  • 不正例: state:{status:1}
  • 正しい例/対処: statusをstringへ直す
  • 影響: INをBLOCKEDとして拒否し直前committedValueを保持します。

TEXTAREA_JOINT_STATE_REASON_INVALID

  • 意味: Joint IN/state/source契約が不正です。
  • 発生経路: applyJointInput
  • 不正例: state:{status:"blocked",reason:1}
  • 正しい例/対処: reasonをstring/nullへ直す
  • 影響: INをBLOCKEDとして拒否し直前committedValueを保持します。

TEXTAREA_JOINT_INPUT_INVALID

  • 意味: Joint IN/state/source契約が不正です。
  • 発生経路: applyJointInput
  • 不正例: applyJointInput(box,"ABC")
  • 正しい例/対処: payloadを通常Objectにする
  • 影響: INをBLOCKEDとして拒否し直前committedValueを保持します。

TEXTAREA_JOINT_SOURCE_INVALID

  • 意味: Joint IN/state/source契約が不正です。
  • 発生経路: applyJointInput
  • 不正例: source:{}
  • 正しい例/対処: sourceをstring/nullへ直す
  • 影響: INをBLOCKEDとして拒否し直前committedValueを保持します。

TEXTAREA_REQUIRED

  • 意味: 入力値がValidation条件を満たしていません。
  • 発生経路: validate/commit時
  • 不正例: required=trueで空文字
  • 正しい例/対処: 1文字以上入力するかrequired=false
  • 影響: commitInvalid=falseではcommittedValueを更新せずeditingValueを保持します。

TEXTAREA_MINLENGTH

  • 意味: 入力値がValidation条件を満たしていません。
  • 発生経路: validate/commit時
  • 不正例: minlength=3で"AB"
  • 正しい例/対処: 3文字以上入力する
  • 影響: commitInvalid=falseではcommittedValueを更新せずeditingValueを保持します。

TEXTAREA_MAXLENGTH

  • 意味: 入力値がValidation条件を満たしていません。
  • 発生経路: validate/commit時
  • 不正例: maxlength=3で"ABCD"
  • 正しい例/対処: 3文字以下へ直す
  • 影響: commitInvalid=falseではcommittedValueを更新せずeditingValueを保持します。

TEXTAREA_022_DEPENDENCY_REQUIRED

  • 意味: 必要な依存Runtime/APIがない、または互換条件を満たしていません。
  • 発生経路: createまたはEffect初期化時
  • 不正例: #022なしでmouseover Effect!=normal
  • 正しい例/対処: 互換#022を読み込むかEffect=normal
  • 影響: 依存不足のままinstance生成/Effect更新は行いません。

TEXTAREA_INSTANCE_INVALID

  • 意味: Runtime instanceまたはDOM環境が不正です。
  • 発生経路: Public API呼出し
  • 不正例: 未管理divをgetValue()へ渡す
  • 正しい例/対処: create/mount済みrootを渡す
  • 影響: 対象Runtime状態を変更しません。

TEXTAREA_DOM_REQUIRED

  • 意味: Runtime instanceまたはDOM環境が不正です。
  • 発生経路: Public API呼出し
  • 不正例: documentのない環境でcreate
  • 正しい例/対処: ブラウザDOM環境でcreateする
  • 影響: 対象Runtime状態を変更しません。

TEXTAREA_IN_REJECTED

  • 意味: Untrusted入力のSecurity検査で拒否されました。
  • 発生経路: inspectUntrustedText/applyJointInput/setValue
  • 不正例: Security検査に失敗したJoint IN
  • 正しい例/対処: 拒否理由codeを確認して安全なstringへ直す
  • 影響: 拒否時は直前committedValueを保持し、HTML風文字列はHTML実行せず文字列として扱います。

TEXTAREA_OUTPUT_OPTIONS_INVALID

  • 意味: OUT Delivery Channel設定または接続状態が不正です。
  • 発生経路: connectOutput/setTargetReady/clearOutputBlock等
  • 不正例: connectOutput(box,[])
  • 正しい例/対処: 通常Objectで接続設定する
  • 影響: 不正な接続変更を適用せず既存値を保持します。

TEXTAREA_OUTPUT_GUARD_INVALID

  • 意味: OUT Delivery Channel設定または接続状態が不正です。
  • 発生経路: connectOutput/setTargetReady/clearOutputBlock等
  • 不正例: guard:"yes"
  • 正しい例/対処: guardをfunction/nullへ直す
  • 影響: 不正な接続変更を適用せず既存値を保持します。

TEXTAREA_OUTPUT_DELIVER_INVALID

  • 意味: OUT Delivery Channel設定または接続状態が不正です。
  • 発生経路: connectOutput/setTargetReady/clearOutputBlock等
  • 不正例: deliver:true
  • 正しい例/対処: deliverをfunction/nullへ直す
  • 影響: 不正な接続変更を適用せず既存値を保持します。

TEXTAREA_OUTPUT_STATE_CALLBACK_INVALID

  • 意味: OUT Delivery Channel設定または接続状態が不正です。
  • 発生経路: connectOutput/setTargetReady/clearOutputBlock等
  • 不正例: onStateChange:{}
  • 正しい例/対処: onStateChangeをfunction/nullへ直す
  • 影響: 不正な接続変更を適用せず既存値を保持します。

TEXTAREA_OUTPUT_CHANNEL_UNBOUND

  • 意味: OUT Delivery Channel設定または接続状態が不正です。
  • 発生経路: connectOutput/setTargetReady/clearOutputBlock等
  • 不正例: connectOutput前にsetTargetReady
  • 正しい例/対処: 先にconnectOutputする
  • 影響: 不正な接続変更を適用せず既存値を保持します。

TEXTAREA_EXISTING_VALUE_SECURITY_LIMIT

  • 意味: 現在のcommittedValueより小さいsecurityMaxLengthへ縮小しようとしました。
  • 発生経路: setOptions
  • 不正例: 現在100文字でsecurityMaxLength=50へ変更
  • 正しい例/対処: 現値長以上へするか先に短い値へ安全に変更
  • 影響: 現在値と既存optionsを保持します。

TEXTAREA_FEEDBACK_INVALID

  • 意味: feedbackが通常のJavaScript Objectではありません。
  • 発生経路: setFeedback
  • 不正例: setFeedback(box,"error")
  • 正しい例/対処: {level:"error",message:"..."}等のObject
  • 影響: 既存feedbackを不正値で上書きしません。

18.2 HTML Functional Class Integration Error

TEXTAREA_FUNCTIONAL_CLASS_RUNTIME_MISSING

  • 意味: bf-textareaを実TextAreaへ変換する時点でBoneTextArea Runtimeがありません。
  • 発生経路: BoneTextAreaFunctionalClass.mount() / 自動scan。
  • 不正例: bone-textarea-functional-class.jsだけを先に読み込み、bone-textarea.jsを読み込まない。
  • 正しい例/対処: bone-textarea.js → bone-textarea-functional-class.js の順で読み込みます。
  • 影響: 元textareaを非表示化・置換せず、壊れた半端なRuntimeを生成しません。

TEXTAREA_FUNCTIONAL_CLASS_ANCHOR_INVALID

  • 意味: mount対象がElementでない、または通常利用Classbf-textareaを持っていません。
  • 発生経路: mount(anchor)。
  • 不正例: mount(document.body)、またはClassなし<textarea>。
  • 正しい例/対処: <textarea class="bf-textarea">...</textarea>をmountします。
  • 影響: 対象DOMを変更せず拒否します。

TEXTAREA_FUNCTIONAL_CLASS_BOOLEAN_INVALID

  • 意味: HTML Boolean属性へ解釈できない文字列を指定しました。
  • 発生経路: data-disabled / data-readonly / data-required / data-spellcheck / data-blur-commit / data-commit-invalid / data-select-on-focus / data-inherit-parent等の読取。
  • 不正例: data-disabled="maybe"。
  • 正しい例/対処: true / false / 1 / 0 / yes / no / on / offを使用します。
  • 影響: 不明なBooleanを勝手にtrue/falseへ丸めずmountを拒否します。

19. Lifecycle

create → input/edit → validate/commit → Joint delivery → destroy。destroy()はDelivery Channelをdisposeし、#022がattach済みならdetachし、WeakMap登録とDOMを除去します。

20. Troubleshooting

  • Enterで確定されない: 正常です。Enterは改行。commitShortcutまたはblur/APIを使用。
  • Ctrl+Enterで確定されない: commitShortcut=meta-enter/none、IME composition中、disabled/readonly等を確認。
  • 横スクロールしない: wrap=offとscroll=auto/scrollを確認。
  • リサイズできない: resize=noneまたはinheritParent=trueを確認。
  • hover Effectが出ない: #022 v1.0.8+とEffect API読込を確認。
  • DOC source is missing: doc-registryのsourceがcontent/DOC-0028/{lang}.mdで、ja/en実体が存在するか確認。

21. 責務境界

  • #001 Core: Bone正規化。
  • #002 Joint: Delivery/WAIT/FIFO/BLOCKED/接続線。
  • #017 Text: 表示文字責務の境界。
  • #022 Hover Border Effect: Mouse Over視覚Effect。
  • #040 ColorPicker: 利用側が色選択UIを必要とする場合のsolid color供給元。#028 Runtime依存ではない。
  • #028 TextArea: 複数行入力、editing/committed、Validation、commit、Security、Multiline Property。