電脳麻将 の 牌譜エディタ では「牌画像と入力フィールドを切り替える」UIを採用しています。 通常は牌画像を表示し、フォーカスが当たると入力フィールドに切り替わります。 この動きを実現しているのが flipInput*1 です。
子要素 A、B を持つ要素 X に flipInput を適用すると、
と動作するように変化します。 B に入力フィールドを置けば、フォーカスを当てて入力し、フォーカスを失えば元に戻るUIを実現できる訳です。
要素 X はフォーカスを受付ける必要があるので tabindex 属性を設定してください。 X がフォーカスされると、その tabindex を要素 B にコピーし、要素 A を非表示、要素 B を表示しフォーカスを当てます。 要素 B がフォーカスを失うと、要素 B を非表示、要素 A を表示し、要素 X の tabindex の値を復元します。
@kobalab/majiang-ui のクラス Majiang.UI.Util の関数 flipInput() の具体的な実装は以下の通りです。
/*
* flip.js
*/
"use strict";
function flipInput(flip) {
flip.off('focus').on('focus', (ev)=>{
let tabindex = $(ev.target).attr('tabindex') || 0;
$(ev.target).removeAttr('tabindex');
$(ev.target).children().eq(0).hide();
let input = $(ev.target).children().eq(1);
input.show();
input.attr('tabindex', tabindex);
input.trigger('focus');
});
flip.each((i ,n)=>{
$(n).children().eq(1).off('blur').on('blur', (ev)=>{
let tabindex = $(ev.target).attr('tabindex');
$(ev.target).removeAttr('tabindex');
$(ev.target).hide();
$(ev.target).parent().attr('tabindex', tabindex);
$(ev.target).parent().children().eq(0).show();
});
$(n).children().eq(1).hide();
});
}
module.exports = { flipInput: flipInput };以下で実際の動作を確認できます。