单击JQuery搜索过滤器框时，标题消失(When clicking on JQuery search filter box, header disappears)

单击JQuery搜索过滤器框时，标题消失(When clicking on JQuery search filter box, header disappears)

注意：这在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将是倾斜（绝对/固定定位也不会工作）。但是，在完全输入过滤器并在手机上按“完成”后，CSS刷新到原始状态，我想知道是否有可能阻止默认行为，香港专业教育学院尝试使用防止默认，但它没有帮助。

任何帮助，将不胜感激。

note: this works perfectly fine on firefox, chrome, the only issue is using mobile browser (iphone/android)

I created a webpage that mimics an address book(phone book) using jQuery/jQuery mobile, and i have all the contacts in a list, and have a search filter bar to search through the contacts.

<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">

additionally, on loading the page i already declared

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

except, with i click on the search filter bar, the CSS will be messed up (the search filter bar will move to around 70% of the height of the screen and all other css that is linked with positioning (z-index) will be skewed (absolute/fixed positioning wont work either). But, after completely typing the filter and pressing "done" on phone, the CSS refreshes to the original state, i was wondering if it were possible to prevent the default behavior, ive tried using preventdefault, but it didnt help.

any help would be appreciated.

最满意答案

您可以准确地调查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语句添加之前的括号之后禁用它

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

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

You can investigate exactly what happens in the jquery source code for fixed headers, specifically for you line 10116 of jquery mobile source code (not minified one). First that listview will have input element on top of it, so if that problem happens when you click on it, it means something is wrong with fixed headers and focusin event, so lets find where fixed header is defined, then go down till we reach what we need.

Fixed headers will still be hidden if the screen is less then certain size, for example this line

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

will trigger that hide on fixed header, so you can disable it by going to this line and just after the brackets before that if statement add

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

That will keep headers on, and hopefully solve your problem.