单击JQuery搜索筛选器框时，标题将消失

When clicking on JQuery search filter box, header disappears

本文关键字：标题 消失 JQuery 搜索 筛选 单击      更新时间：2023-09-26

注意：这在firefox、chrome上运行得很好，唯一的问题是使用移动浏览器（iphone/android）

我使用jQuery/jQuery mobile创建了一个模仿通讯录（电话簿）的网页，我在一个列表中列出了所有联系人，并有一个搜索过滤栏来搜索联系人。

<ul id="Addressbook" data-role="listview" data-filter="true" data-filter-placeholder="Type name here for filter search" data-filter-theme="f" data-inset="true">

另外，在加载页面时，我已经声明了

$("[data-role=footer]").fixedtoolbar({ tapToggle: false });
$("[data-role=header]").fixedtoolbar({ tapToggle: false });

除了，当我点击搜索过滤器栏时，CSS将被打乱（搜索过滤器栏将移动到屏幕高度的70%左右，所有其他与定位（z-index）链接的CSS都将被扭曲（绝对/固定定位也不起作用）。但是，在完全键入过滤器并在手机上按"done"后，CSS刷新到原始状态，我想知道是否有可能阻止默认行为，我尝试使用preventdefault，但没有帮助。

任何帮助都将不胜感激。

您可以调查jquery源代码中固定头的具体情况，特别是jquery移动源代码的第10116行（不是缩小的）。首先，listview的顶部会有input元素，所以如果当你点击它时出现了这个问题，那就意味着固定标题和focusin事件出了问题，所以让我们找到固定标题的定义位置，然后往下看，直到我们到达所需的位置。

如果屏幕小于特定大小，固定标题仍将被隐藏，例如这行

.bind( "focusin focusout", function( e ) {
      if ( screen.width < 1025 && $( e.target ).is( o.hideDuringFocus ) && !$( e.target ).closest( ".ui-header-fixed, .ui-footer-fixed" ).length ) {}

将触发隐藏在固定标题上，所以您可以通过转到这一行并在if语句添加之前的括号后面禁用它

.bind( "focusin focusout", function( e ) {
    return false;
    //you can keep rest of the code

这将保持标题，并有望解决您的问题。

相关文章：