时间戳

首页 > 解决方案 > 输入焦点时键盘消失 - 移动

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

问题描述

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

标签： javascriptjquery

解决方案

当您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);

推荐阅读