MTAppjQuery P7

MTAppFieldSplit

1つの入力欄を区切り文字で複数の入力欄に分割する。各欄の値は区切り文字で連結して元の欄へ書き戻すため、保存値は通常のテキストフィールドと同じ。

1つのテキスト入力欄を、区切り文字で区切られた複数の入力欄に分割する jQuery プラグインです。各欄に入力した値は区切り文字で連結され、元の欄へ書き戻されます。「姓・名」「郵便番号の前後」「ハイフン区切りのコード」などを別々の欄で入力させたいときに使います。保存される値は連結後の文字列なので、サーバー側の扱いは通常のテキストフィールドと変わりません。

構文

$(selector).MTAppFieldSplit(options);

$.fn プラグイン（$(selector).MTAppFieldSplit(...)）です。対象要素（this）を返すのでチェーンできます。

パラメータ

options {Object} — すべて省略可。以下のプロパティを持ちます。

プロパティ	型	既定値	説明
`splitCount`	number	`2`	分割する入力欄の数（2 未満を指定しても 2 になる）
`separator`	string	`','`	値の連結・分割に使う区切り文字
`placeholders`	Array	`[]`	各入力欄の placeholder（インデックス順）
`styles`	Array	`[]`	各入力欄に適用する inline style 文字列（インデックス順）
`classes`	Array	`[]`	各入力欄に付与する class（インデックス順）
`addClass`	string	`''`	すべての入力欄に共通で付与する class
`direction`	string	`'row'`	入力欄の並び。`'row'`（横並び・既定）／`'column'`（縦並び）
`placeholder`	Array	—	非推奨。`placeholders` のエイリアス
`debug`	boolean	`false`	`true` で元の入力欄を隠さず残す

戻り値

{jQuery} — 対象要素（チェーン可能）。

保存される値

各分割欄の値を区切り文字（separator・既定 ,）で連結した文字列が、元のフィールドへ保存されます。例: 区切りが , で「姓」「名」を入力 → 山田,太郎。

使用例

姓・名の2分割

$('#customfield_name').MTAppFieldSplit({
    splitCount: 2,
    separator: ',',
    placeholders: ['姓', '名'],
    addClass: 'text'
});

ハイフン区切りのコードを3分割

$('#customfield_code').MTAppFieldSplit({
    splitCount: 3,
    separator: '-',
    placeholders: ['000', '0000', '00']
});

縦並びにする

$('#customfield_address').MTAppFieldSplit({
    splitCount: 2,
    placeholders: ['都道府県', '市区町村以下'],
    direction: 'column'
});

user.js での記述例

user.js（「デザイン → user.js を編集」）に書く場合は、mtappVars.screen_id で画面を判定して呼び出します。

(function ($) {
    if (typeof mtappVars !== 'object') return;
    if (mtappVars.screen_id === 'edit-entry') {
        $('#customfield_name').MTAppFieldSplit({
            splitCount: 2,
            separator: ',',
            placeholders: ['姓', '名'],
            addClass: 'text'
        });
    }
})(jQuery);

生成される HTML

元の入力欄は隠され（debug: true のときは表示のまま）、直後に span.mtapp-fieldsplit でまとめた分割欄が挿入されます。

<input type="text" id="customfield_name" style="display:none">
<span class="mtapp-fieldsplit">
    <input type="text" class="text" placeholder="姓">
    <input type="text" class="text" placeholder="名">
</span>

補足

分割欄は既定で横並び（flexbox）です。direction: 'column' を指定すると縦並びになります。
元の欄に既に値がある場合は、separator で分割して各入力欄の初期値に割り当てます。
各入力欄を blur した時、または Enter キーを押した時に、全欄の値を separator で連結して元の欄へ書き戻します。
placeholders / styles / classes は配列のインデックスが各入力欄に対応します。addClass は全欄共通の class です（classes と併用すると両方が付与されます）。
入力欄は値・placeholder・class・style を要素の属性／プロパティとして安全に設定するため、フィールド値などに HTML が含まれても解釈されません（HTML インジェクションを起こしません）。

構文