MTAppInlineEdit

入力欄（input / textarea）をインラインエディットにする jQuery プラグインです。ふだんは値を表示用のテキスト（<span>）として見せ、「編集」ボタンを押したときだけ入力欄を表示します。入力欄が多い編集画面を、すっきり見せたいときに使います。

構文

$(selector).MTAppInlineEdit(options);

$.fn プラグイン（対象の入力欄に対して呼び出します）です。

パラメータ

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

戻り値

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

保存される値

入力欄の値がそのまま保存されます。表示（<span>）と編集（入力欄）の切り替えを行うだけで、保存される値の形式は変えません。

使用例

// 値があるときだけインラインエディットにする
$('#customfield_foo').MTAppInlineEdit();

// 値が空でも常にインラインエディットにし、ボタン名も変更
$('#customfield_bar').MTAppInlineEdit({ edit: '変更', always: true });

user.js での記述例

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

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

生成される HTML

対象の入力欄の前に表示用 <span>、後ろに編集ボタンが挿入され、入力欄自体は隠されます。

<span>現在の値</span>
<input id="customfield_foo" type="text" value="現在の値" style="display:none;">
<button type="button" class="mt-edit-field-button button">編集</button>

「編集」ボタンを押すと、表示用 <span> と編集ボタンが隠れ、入力欄が表示されます（入力欄には edited クラスが付きます）。

補足

• always が false（既定）のときは、値が空の入力欄には何もしません（通常の入力欄のまま表示されます）。
• 表示用 <span> には値をテキストとして安全に挿入します（HTML として解釈されません）。
• 編集ボタンを押すと入力欄が表示されますが、表示状態を元の <span> に戻すトグルは行いません（一度編集モードに入るとそのまま入力できます）。
• $.MTAppRemoveVal など入力欄をラップする他のメソッドと併用しても、表示/編集の切り替えが壊れないように作られています。

関連

• $.fn.MTAppRemoveVal — 入力欄にクリアボタン（×）を付ける。
• MTAppDebug — フィールドのベースネーム一覧などデバッグ情報を表示する。