MTAppjQuery P7

MTAppLineBreakField

「1項目ごとに改行」式のテキストエリアを、項目ごとの入力欄＋追加・削除・並べ替え GUI に置き換える jQuery プラグイン。値は改行区切りで元の欄へ書き戻す。

「1 項目ごとに改行して入力してください」というテキストエリアを、項目ごとの入力欄に分割し、追加・削除・並べ替えができる GUI に置き換える jQuery プラグインです。元のテキストエリアは隠し、各行を 1 つの入力欄として表示します。入力欄の内容は改行区切りでまとめて元の欄へ書き戻すため、保存される値の形式は従来どおりです。

構文

$(selector).MTAppLineBreakField(options);

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

パラメータ

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

プロパティ	型	既定値	説明
`inputClass`	string	`text full`	生成する各入力欄に付与するクラス（スペース区切りで複数指定可）
`sortable`	boolean	`true`	`true` で項目をドラッグ＆ドロップで並べ替え可能にする（jQuery UI Sortable）
`input_class`	string	—	非推奨: `inputClass` のエイリアス。`inputClass` 未指定時のみ採用

戻り値

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

保存される値

各入力欄の値を改行区切りで連結した文字列が、元のフィールドへ保存されます（従来の「1 項目ごとに改行」形式）。値が空の行は保存対象から除かれます。

使用例

基本

$('#customfield_tags').MTAppLineBreakField();

クラス指定・並べ替え無効

$('#customfield_tags').MTAppLineBreakField({ inputClass: 'text full', sortable: false });

user.js での記述例

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

(function ($) {
    if (typeof mtappVars !== 'object') return;
    if (mtappVars.screen_id === 'edit-entry') {
        $('#customfield_tags').MTAppLineBreakField();
    }
})(jQuery);

生成される HTML

元の欄は隠され（display: none）、その直後に行ごとの項目が追加されます。各項目は入力欄と「＋」追加ボタン（画像）を含みます。

<span class="mtapp-linebreak-field-item">
    <span class="mtapp-linebreak-field-item-inner">
        <input type="text" class="mtapp-linebreak-field-input text full">
        <img class="mtapp-linebreak-field-add" src="…/images/plus-circle.png" alt="plus">
    </span>
</span>

sortable: true のときは、項目を囲む親要素（.field-content）に mtapp-sortable クラスが付き、jQuery UI Sortable が適用されます。

補足

各入力欄の blur 時に、すべての入力値を改行区切りでまとめて元の欄へ書き戻します。値が空の入力欄は（項目が 2 つ以上あるとき）その行ごと削除されます。
「＋」ボタンを押すと、その項目の直後に空の入力欄を追加してフォーカスします。入力欄で Enter を押しても、値を確定してから新しい入力欄を追加します。ただし日本語などの IME 変換を確定する Enter（isComposing）は項目追加に使いません（確定した文字が新項目に重複して入るのを防ぐため）。変換確定後にもう一度 Enter を押すと項目を追加できます。
入力欄の値は jQuery の .val() で設定するため、元の欄に二重引用符やタグ文字列が含まれていても、属性インジェクション（DOM-XSS）にはなりません。
イベントは .field-content への委譲（click.mtapplinebreakfield ほか）で処理し、項目の特定に .closest('.mtapp-linebreak-field-item') を使います。そのため後続メソッド（MTAppRemoveVal など）が入力欄をラップしても正しく動作します。
並べ替え（sortable: true）した後は、並び順に合わせて元の欄を再同期します。
MT 5.2 以降向けの機能です。

構文

パラメータ

戻り値

保存される値

使用例

基本

クラス指定・並べ替え無効

user.js での記述例

生成される HTML

補足

関連