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-textareaRuntimeです。元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 まず基本操作を理解する
- 文字を入力するとeditingValueだけが変わります。
- Enterを押すと改行します。DefaultでもEnter単独ではcommitしません。
- Defaultの
commitShortcut=ctrl-or-meta-enterでは、Windows/LinuxのCtrl+Enter、macOSのCmd+Enterでcommitします。 blurCommit=true(Default)なら、フォーカスを外した時にもcommitを試みます。- required/minlength/maxlengthに違反し、
commitInvalid=falseならcommitを拒否し、committedValueは直前の値を維持します。 - Escapeは未確定のeditingValueを破棄し、committedValueへ戻します。
- 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""/ HTMLplaceholder / data-placeholder/ 空欄時に補助文字を表示。値が入ると表示されない。disabled— 型boolean/ Defaultfalse/ HTMLdisabled / data-disabled/ trueで入力・focus・編集を無効化する。readonly— 型boolean/ Defaultfalse/ HTMLreadonly / data-readonly/ trueで値編集を禁止するが、内容の選択・参照は可能。required— 型boolean/ Defaultfalse/ HTMLrequired / data-required/ 空文字をValidation errorにする。minlength— 型integer/null/ Defaultnull/ HTMLminlength / data-minlength/ 最小文字数を設定する。maxlength— 型integer/null/ Defaultnull/ HTMLmaxlength / data-maxlength/ 最大文字数を設定し、実textareaのmaxLengthにも反映する。name— 型string/ Default""/ HTMLname / data-name/ 内部textareaのnameを設定する。autocomplete— 型string/ Default"off"/ HTMLautocomplete / data-autocomplete/ 内部textareaのautocomplete属性を設定する。spellcheck— 型boolean/ Defaultfalse/ HTMLspellcheck / data-spellcheck/ ブラウザのスペルチェック指定。inputMode— 型string/ Default"text"/ HTMLinputmode / data-input-mode/ ソフトキーボード等の入力モードhint。rows— 型integer/ Default6/ HTMLrows / data-rows/ textareaの表示行数hintを設定する。cols— 型integer/ Default40/ HTMLcols / data-cols/ textareaの表示列数hintを設定する。wrap— 型enum/ Default"soft"/ HTMLwrap / data-wrap/ 長い行の折返し方法を指定する。resize— 型enum/ Default"vertical"/ HTMLdata-resize/ ユーザーによるリサイズ方向を指定する。scroll— 型enum/ Default"auto"/ HTMLdata-scroll/ overflow表示方法を指定する。commitShortcut— 型enum/ Default"ctrl-or-meta-enter"/ HTMLdata-commit-shortcut/ 複数行入力でcommitするショートカットを指定する。blurCommit— 型boolean/ Defaulttrue/ HTMLdata-blur-commit/ focusを失った時にcommitするか指定。commitInvalid— 型boolean/ Defaultfalse/ HTMLdata-commit-invalid/ Validation invalidでもcommitを許可するか指定。selectOnFocus— 型boolean/ Defaultfalse/ HTMLdata-select-on-focus/ focus時に全文選択する。ariaLabel— 型string/ Default""/ HTMLaria-label / data-aria-label/ 内部textareaのARIA labelを設定。className— 型string/ Default""/ HTMLdata-class-name/ Runtime rootへ追加Classをcreate時に付与。theme— 型enum/ Default"default"/ HTMLdata-theme/ テーマ配色を選択。backgroundColor— 型color/ Default"theme"/ HTMLdata-background-color/ TextArea背景色を指定。appearance— 型enum/ Default"normal"/ HTMLdata-appearance/ 外見モードを指定。inheritParent— 型boolean/ Defaultfalse/ HTMLdata-inherit-parent/ 親要素のサイズ・背景・文字色・枠・角丸・text-alignへ追従。width— 型number px/ Default480/ HTMLdata-width/ 単体時のRuntime幅。height— 型number px/ Default160/ HTMLdata-height/ textarea本体の高さ。position— 型enum/ Default"center"/ HTMLdata-position/ 親Preview内での9方向配置。inputAlign— 型enum/ Default"auto"/ HTMLdata-input-align/ 入力文字の横方向寄せ。activeBorderEffect— 型enum/ Default"normal"/ HTMLdata-active-border-effect/ focus中のActive枠Effectを選択。activeEffectColor— 型color/ Default"theme"/ HTMLdata-active-effect-color/ Active Effect色を指定。activeEffectDirection— 型enum/ Default"clockwise"/ HTMLdata-active-effect-direction/ Active Effect方向。activeEffectSpeed— 型enum/ Default"normal"/ HTMLdata-active-effect-speed/ Active Effect速度。mouseoverBorderEffect— 型enum/ Default"normal"/ HTMLdata-mouseover-border-effect/ Mouse Over時の#022枠Effect。mouseoverEffectColor— 型color/ Default"theme"/ HTMLdata-mouseover-effect-color/ Mouse Over Effect色。mouseoverEffectDirection— 型enum/ Default"clockwise"/ HTMLdata-mouseover-effect-direction/ Mouse Over Effect方向。mouseoverEffectSpeed— 型enum/ Default"normal"/ HTMLdata-mouseover-effect-speed/ Mouse Over Effect速度。securityMaxLength— 型integer/ Default262144/ HTMLdata-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配送
connectOutput(... targetReady:false)でTarget Busy。- Aをcommit → 接続は維持したままWAIT、QueueへA。
- Bをcommit → Queueは
[A,B]。 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へ変換する時点でBoneTextAreaRuntimeがありません。 - 発生経路:
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でない、または通常利用Class
bf-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。