草庐IT

javascript - 单击输入字段触发窗口调整大小

coder 2023-08-09 原文

我有一个带有 Logo 、菜单和搜索的标题。当我在桌面上时，我会按顺序显示所有元素，但如果我的窗口宽度小于 980 像素，菜单会隐藏(得到一个切换)，并且 Logo 会从 nav 中分离出来，并且附在标志后。如果宽度更大，则 Logo 将再次分离并附加到 DOM 中的旧位置。

    $(window).on('resize', function() {
      if ($(window).width() < 980) {
        $('#search-container').detach().insertAfter('#logo');
      } else {
        $('#search-container').detach().insertAfter('#main_menu');
      }
    });
#logo {
  display: block;
  margin: 10px auto 15px;
  text-align: center;
}
#search-container {
  display: inline-block;
  vertical-align: top;
  margin-top: 8px;
  background: #fff;
  border-radius: 5px;
  padding: 1px 10px;
}
#search-container .header_search {
  display: inline-block;
  line-height: 6px;
}
#search-container input {
  border: 0;
  background-color: transparent;
  font-style: italic;
  color: rgb(114, 114, 114);
  color: rgba(114, 114, 114, 0.5);
  font-size: 14px;
  line-height: 25px;
  font-weight: 400;
  text-align: left;
  display: inline-block;
  vertical-align: top;
  width: auto;
}
#search-container input:active,
#search-container input:focus {
  outline: none;
  border: 0;
}
#search-container .submit {
  display: inline-block;
  margin-left: 10px;
  cursor: pointer;
  z-index: 10;
}
#search-container .submit i {
  color: #d3031c;
  font-size: 26px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="logo">Logo</div>

<div class="menu_wrapper">
  <nav>
    <ul id="main_menu" class="">
      <li>Menu1</li>
      <li>Menu2</li>
      <li>Menu3</li>
    </ul>
    <div id="search-container" class="search-box-wrapper hide">
      <div class="header_search">
        <form name="search" id="search" method="get" action="#">
          <input name="s" type="text" placeholder="Search" value="Search">
          <a class="submit"><i class="fa fa-search"></i></a>
        </form>
      </div>
    </div>
  </nav>
</div>

现在这个问题发生在手机上(从反馈来看，只有安卓)，当你点击输入字段输入搜索查询时，resize 被激活，并且搜索容器在同一个空间中分离和附着自己。我不知道为什么会这样。当我用调整大小注释 jquery 代码部分时，我可以毫无问题地在输入字段中键入。

为什么点击会触发调整大小？我检查了媒体查询，我没有以任何方式扩展该元素。

最佳答案

我仍然不知道为什么会发生这种情况(调整大小)，但我找到了解决方案:

我正在关闭 $('#search-container') 单击事件的窗口调整大小:

$('#search-container').on('click', function(){
    $(window).off('resize');
});

停止调整窗口大小(这是导致问题的原因)，您现在可以在 android 上轻松输入:)

关于javascript - 单击输入字段触发窗口调整大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35280763/

javascript单击search-containersearch34androidjqueryhtmlcss

有关javascript - 单击输入字段触发窗口调整大小的更多相关文章

  1. ruby-on-rails - 在 Rails 中将文件大小字符串转换为等效千字节 - 2

    我的目标是转换表单输入，例如“100兆字节”或“1GB”，并将其转换为我可以存储在数据库中的文件大小(以千字节为单位)。目前，我有这个:defquota_convert@regex=/([0-9]+)(.*)s/@sizes=%w{kilobytemegabytegigabyte}m=self.quota.match(@regex)if@sizes.include?m[2]eval("self.quota=#{m[1]}.#{m[2]}")endend这有效，但前提是输入是倍数(“gigabytes”，而不是“gigabyte”)并且由于使用了eval看起来疯狂不安全。所以，功能正常，

  2. ruby-on-rails - 如何验证非模型(甚至非对象)字段 - 2

    我有一个表单，其中有很多字段取自数组(而不是模型或对象)。我如何验证这些字段的存在？solve_problem_pathdo|f|%>... 最佳答案 创建一个简单的类来包装请求参数并使用ActiveModel::Validations。#definedsomewhere,atthesimplest:require'ostruct'classSolvetrue#youcouldevencheckthesolutionwithavalidatorvalidatedoerrors.add(:base,"WRONG!!!")unlesss

  3. ruby-on-rails - form_for 中不在模型中的自定义字段 - 2

    我想向我的Controller传递一个参数，它是一个简单的复选框，但我不知道如何在模型的form_for中引入它，这是我的观点:{:id=>'go_finance'}do|f|%>Transferirde:para:Entrada:"input",:placeholder=>"Quantofoiganho?"%>Saída:"output",:placeholder=>"Quantofoigasto?"%>Nota:我想做一个额外的复选框，但我该怎么做，模型中没有一个对象，而是一个要检查的对象，以便在Controller中创建一个ifelse，如果没有检查，请帮助我，非常感谢,谢谢

  4. ruby - 触发器 ruby​​ 中 3 点范围运算符和 2 点范围运算符的区别 - 2

    请帮助我理解范围运算符...和..之间的区别，作为Ruby中使用的“触发器”。这是PragmaticProgrammersguidetoRuby中的一个示例:a=(11..20).collect{|i|(i%4==0)..(i%3==0)?i:nil}返回:[nil,12,nil,nil,nil,16,17,18,nil,20]还有:a=(11..20).collect{|i|(i%4==0)...(i%3==0)?i:nil}返回:[nil,12,13,14,15,16,17,18,nil,20] 最佳答案 触发器(又名f/f)是

  5. ruby-on-rails - Rails - 乐观锁定总是触发 StaleObjectError 异常 - 2

    我正在学习Rails，并阅读了关于乐观锁的内容。我已将类型为integer的lock_version列添加到我的articles表中。但现在每当我第一次尝试更新记录时，我都会收到StaleObjectError异常。这是我的迁移:classAddLockVersionToArticle当我尝试通过Rails控制台更新文章时:article=Article.first=>#我这样做:article.title="newtitle"article.save我明白了:(0.3ms)begintransaction(0.3ms)UPDATE"articles"SET"title"='dwdwd

  6. ruby-on-rails - 在 Rails 和 ActiveRecord 中查询时忽略某些字段 - 2

    我知道我可以指定某些字段来使用pluck查询数据库。ids=Item.where('due_at但是我想知道，是否有一种方法可以指定我想避免从数据库查询的某些字段。某种反拔？posts=Post.where(published:true).do_not_lookup(:enormous_field) 最佳答案 Model#attribute_names应该返回列/属性数组。您可以排除其中一些并传递给pluck或select方法。像这样:posts=Post.where(published:true).select(Post.attr

  7. ruby-on-rails - 如何在 Rails Controller Action 上触发 Facebook 像素 - 2

    我有一个ruby​​onrails应用程序。我按照facebook的说明添加了一个像素。但是，要跟踪转化，Facebook要求您将页面置于达到预期结果时出现的转化中。即，如果我想显示客户已注册，我会将您注册后转到的页面作为成功对象进行跟踪。我的问题是，当客户注册时，在我的应用程序中没有登陆页面。该应用程序将用户带回主页。它在主页上显示了一条消息，所以我想看看是否有一种方法可以跟踪来自Controller操作而不是实际页面的转化。我需要计数的Action没有页面，它们是ControllerAction。是否有任何人都知道的关于如何执行此操作的gem、文档或最佳实践？这是进入布局文件的像素

  8. HBase Region 简介和建议数量&大小 - 2

    Region是HBase数据管理的基本单位,region有一点像关系型数据的分区。region中存储这用户的真实数据，而为了管理这些数据，HBase使用了RegionSever来管理region。Region的结构hbaseregion的大小设置默认情况下，每个Table起初只有一个Region，随着数据的不断写入，Region会自动进行拆分。刚拆分时，两个子Region都位于当前的RegionServer，但处于负载均衡的考虑，HMaster有可能会将某个Region转移给其他的RegionServer。RegionSplit时机：当1个region中的某个Store下所有StoreFile

  9. ruby-on-rails - Ruby 中意外的大小写行为 - 2

    我在一段非常简单的代码(如我所想)中得到了一个错误的值:org=4caseorgwhenorg=4val='H'endputsval=>nil请不要生气，我希望我错过了一些非常明显的东西，但我真的想不通。谢谢。 最佳答案 这是典型的Ruby错误。case有两种被调用的方法，一种是你传递一个东西作为分支的基础，另一种是你不传递的东西。如果您确实在case中指定了一个表达式语句然后评估所有其他条件并与===进行比较.在这种情况下org评估为false和org===false显然不是真的。所有其他情况也是如此，它们要么是真的，要么是假的。

  10. ruby - 鸭子输入字符串、符号和数组的优雅方式？ - 2

    这是针对我无法破坏的现有公共(public)API，但我确实希望对其进行扩展。目前，该方法采用字符串或符号或任何其他在作为第一个参数传递给send时有意义的内容我想添加发送字符串、符号等列表的功能。我可以只使用is_a吗？数组，但还有其他发送列表的方法，这不是很像ruby​​。我将调用列表中的map，所以第一个倾向是使用respond_to?:map。但是字符串也会响应:map，所以这行不通。 最佳答案 如何将它们全部视为数组？String的行为与仅包含String的Array相同:deffoo(obj,arg)[*arg].eac

随机推荐