输入焦点时键盘消失 - 移动

Question

我有这个代码并且一切正常，但是当我在移动设备上打开搜索栏并单击输入字段时，我的键盘打开和关闭，我发现 window.resize 是问题所在，但我还没有找到任何修复方法， 我该怎么办？

function appendSearchBar() {
    if($(window).width() <= 769){
        $('.search-bar').appendTo('.mobile-toolbar .global-search');
    } else {
        $('.search-bar').appendTo('.header-toolbar-nav .global-search');
    }
}
$(window).resize(function() {
    appendSearchBar();
});

Answer 1

当您appendTo元素被分离并重新附加到 DOM 时，因此失去焦点。

仅当它不在您想要的位置时才应附加。

let inMobile;

function appendSearchBar(firstTime) {
  const windowWidth = $(window).width();

  if (windowWidth <= 769 && (!inMobile || firstTime)) {
    inMobile = true;
    $('.search-bar').appendTo('.mobile-toolbar .global-search');
  }
  if (windowWidth > 769 && (inMobile || firstTime)) {
    inMobile = false;
    $('.search-bar').appendTo('.header-toolbar-nav .global-search');
  }

  $(window).resize(function() {
    appendSearchBar();
  });

  appendSearchBar(true);