diff --git a/assets/javascripts/app.js b/assets/javascripts/app.js index 6127288..6a2dd20 100644 --- a/assets/javascripts/app.js +++ b/assets/javascripts/app.js @@ -2188,7 +2188,8 @@ $(function() { //萬用表格searchbtn2 $(document).ready(function () { $('.searchbtn2').click(function (event) { - event.preventDefault(); // 防止預設行為 + event.preventDefault(); + event.stopPropagation(); // ✅ 加這行，防止冒泡到 .ken-click $(".searchbox").slideToggle(300, function () { updateAriaExpanded(); }); @@ -2205,74 +2206,117 @@ $(function() { // 預設 aria-expanded 為 false $(".searchbtn2").attr("aria-expanded", "false"); }); - //強制保持全站search展開 + // searchbtn2 Tab 鍵聚焦時自動展開 .searchbox + $(document).ready(function() { + function fixSearchbtn2FocusA11y() { + setTimeout(function() { + + var isMouseClick = false; + + // 滑鼠按下時標記 + $('.searchbtn2').on('mousedown', function() { + isMouseClick = true; + setTimeout(function() { isMouseClick = false; }, 300); + }); + + // focus 事件：只有 Tab 聚焦（非滑鼠）才自動展開 + $('.searchbtn2').on('focus', function() { + if (isMouseClick) return; // 滑鼠點擊來的 focus，跳過 + + var $searchbox = $('.searchbox'); + if (!$searchbox.is(':visible')) { + $searchbox.slideDown(300, function() { + $('.searchbtn2').attr('aria-expanded', 'true'); + $('.searchbtn2').closest('.ken-click').addClass('ken-click2'); + }); + } + }); + + }, 500); + } + + fixSearchbtn2FocusA11y(); + }); + // 強制保持全站search展開 $(document).ready(function () { - //search移位 - function moveSearchIfWide() { - if ($('.input-search').is(':focus')) return; - - if ($(window).width() > 769) { - // 如果已經在正確位置就不動 - if (!$('.modules-menu-level-0 .searchclass').length) { - $('.searchclass').appendTo('.header-nav'); - } - } else { - if (!$('.navbar-header .searchclass').length) { - $('.navbar-brand').after($('.searchclass')); - } - } - } - - $(document).ready(moveSearchIfWide); - $(window).on('resize', moveSearchIfWide); - const $searchBox = $('.search-box'); const $input = $searchBox.find('.input-search'); const $btn = $('.btn-search'); + // 輔助函式：安全地檢查輸入框是否為空 + // 解決 Cannot read properties of undefined (reading 'trim') + function isInputEmpty() { + if ($input.length === 0) return true; // 如果找不到 input，視為空 + var val = $input.val(); + return !val || val.toString().trim() === ''; + } + + // // search移位 + // function moveSearchIfWide() { + // // 如果 input 正在輸入中，不要移動位置，避免鍵盤消失或閃爍 + // if ($input.is(':focus')) return; + + // if ($(window).width() > 769) { + // // 如果已經在正確位置就不動 + // if (!$('.modules-menu-level-0 .searchclass').length) { + // $('.searchclass').appendTo('.modules-menu-level-0'); + // } + // } else { + // // 行動版位置 + // if ($('.navbar-brand').length > 0) { + // $('.navbar-brand').after($('.searchclass')); + // } + // } + // } + + // // 初始化與 Resize 監聽 + // moveSearchIfWide(); + // $(window).on('resize', moveSearchIfWide); + // 點擊 btn 時：若未展開則展開，展開後才可送出 $btn.on('click', function (e) { - if (!$searchBox.hasClass('searching')) { - e.preventDefault(); // 第一次點擊不送出 - // 延遲讓 Android 不會立即 blur - setTimeout(() => { - $searchBox.addClass('searching'); - $input[0].focus(); // 用 DOM 方式較穩 - }, 100); - } else if (!$input.val().trim()) { - // 沒有輸入值 → 不送出，focus 回去 - e.preventDefault(); - $input[0].focus(); - } - // 有輸入值就正常送出 + if (!$searchBox.hasClass('searching')) { + e.preventDefault(); // 第一次點擊不送出 + // 延遲讓 Android 不會立即 blur + setTimeout(() => { + $searchBox.addClass('searching'); + if ($input.length > 0) $input[0].focus(); + }, 100); + } else if (isInputEmpty()) { + // 沒有輸入值 → 不送出，focus 回去 + e.preventDefault(); + if ($input.length > 0) $input[0].focus(); + } + // 有輸入值就正常送出 }); // 點外面收起（無字才收） $(document).on('click touchstart', function (e) { - if ( - !$searchBox.is(e.target) && - $searchBox.has(e.target).length === 0 && - !$input.val().trim() - ) { - $searchBox.removeClass('searching'); - } - }); - - // focus 時延遲加 .searching，避免 Android 被打斷 - $input.on('focus', function () { - setTimeout(() => { - $searchBox.addClass('searching'); - }, 50); - }); - - // blur 時延遲移除 .searching，避免太早發生 - $input.on('blur', function () { - setTimeout(() => { - if (!$input.val().trim()) { - $searchBox.removeClass('searching'); + if ( + $searchBox.length > 0 && + !$searchBox.is(e.target) && + $searchBox.has(e.target).length === 0 && + isInputEmpty() + ) { + $searchBox.removeClass('searching'); } - }, 150); + }); + + // focus 時延遲加 .searching + $input.on('focus', function () { + setTimeout(() => { + $searchBox.addClass('searching'); + }, 50); + }); + + // blur 時延遲移除 .searching + $input.on('blur', function () { + setTimeout(() => { + if (isInputEmpty()) { + $searchBox.removeClass('searching'); + } + }, 150); }); }); // 當文件物件模型(DOM)載入後，執行init函數 diff --git a/modules/ad_banner/_ad_banner_widget11.html.erb b/modules/ad_banner/_ad_banner_widget11.html.erb index fd1ac11..005e97a 100644 --- a/modules/ad_banner/_ad_banner_widget11.html.erb +++ b/modules/ad_banner/_ad_banner_widget11.html.erb @@ -28,7 +28,17 @@ - +