xlc https://blog.hatena.ne.jp/xlc/ koba::blog https://blog.kobalab.net/ 麻雀 JavaScript 電脳麻将 の 牌譜エディタ では「牌画像と入力フィールドを切り替える」UIを採用しています。通常は牌画像を表示し、フォーカスが当たると入力フィールドに切り替わります。この動きを実現しているのが flipInput*1 です。子要素 A、B を持つ要素 X に flipInput を適用すると、 通常は A を表示 X がフォーカスされたときは B を表示 と動作するように変化します。B に入力フィールドを置けば、フォーカスを当てて入力し、フォーカスを失えば元に戻るUIを実現できる訳です。 *1:flip は「ひっくり返る」という意味で、このUIの動作する感じを表しています 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fblog.kobalab.net%2Fentry%2F2026%2F03%2F17%2F011103" title="電脳麻将UI 〜 flipInput - koba::blog" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> https://cdn-ak.f.st-hatena.com/images/fotolife/x/xlc/20260316/20260316192913.png Hatena Blog https://hatena.blog 2026-03-17 01:11:03 rich https://blog.kobalab.net/entry/2026/03/17/011103 1.0 100%