Question

注意：这在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％左右，以及与定位相关联的所有其他css（z-index））将会扭曲（绝对/固定定位也不会起作用）。但是，在完全键入过滤器并在手机上按“完成”后，CSS刷新到原始状态，我想知道是否有可能阻止默认行为，我尝试使用preventdefault，但它没有帮助。

任何帮助将不胜感激。

Answer 1

您可以准确调查jquery源代码中针对固定标头发生的情况，特别是针对您的jquery移动源代码的10116行（不是缩小的代码）。首先listview将在其上面有输入元素，所以如果在你点击它时发生这个问题，这意味着固定标题和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语句add

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

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

单击JQuery搜索过滤器框时，标题消失

1 个答案: