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

【问题标题】：Keyboard disappearing when input on focus - mobile输入焦点时键盘消失 - 移动
【发布时间】：2020-11-12 15:34:58
【问题描述】：

我有这段代码，一切正常，但是当我在移动设备上打开搜索栏并单击输入字段时，我的键盘打开和关闭，我发现 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();
});

【问题讨论】：

标签： javascript jquery

【解决方案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);

【讨论】：