Summary of issues encountered on mobile H5 pages

Recently just finished a mobile project, the invincible product, the process of hardship, I will not say, record the problems encountered in this project, just in case, although these may have been more than the number of N-predecessors solved the problem, also put here, for their own long front road paved a small stone son, Also at the end of the text left their unresolved doubts, hope to see the friends can be doubts.

All know to do the development of mobile, in the computer debugging good things, put on the phone may really second seconds on the bombing, I swear never thought fried so fast ...

1. iOS cannot listen to input box KeyUp event

This little headline seems unclear, presumably, there is a list of pages in the app, there is a search function on the page, using the KeyUp listening input box, each time KeyUp to retrieve the cache data there is no matching data, however, goose, iOS is not able to search every time keyup, through a variety of search, iOS Input method (whether third party or self-brought) can detect English or digital KeyUp, undetectable Chinese KeyUp, (as for punctuation those, did not drill down), after entering the Chinese need to click the fallback button , will start to search, I can think of the method is timed detection setinterval, I can only think of this method, but always feel not very good, so search for this method (http://blog.csdn.net/lytlx/article/details/ 50845259) Replace the KeyUp event with "input" and "PropertyChange" events.

Oninput is a standard event for HTML5 , which is useful for detecting textarea, Input:text, Input:password, and input:search elements that have changed through the user interface. Triggered immediately after the content has been modified, unlike the onchange event that needs to lose focus. The compatibility of Oninput events in mainstream browsers is as follows:

　　

　　The oninput event is not supported in IE9 versions and requires the use of IE-specific Onpropertychange event substitution, which is triggered when the user interface changes or directly modifies the content using a script, in the following situations:

• Modified the Input:checkbox or Input:radio element selection state, the checked attribute changed.
• The value of the Input:text or TEXTAREA element has been modified, and the property of value has changed.
• The selected item of the SELECT element has been modified, and the SelectedIndex property has changed.

After you hear the onpropertychange event, you can use the PropertyName property of the event to get the name of the property that has changed, so it appears that Oninput & Onpropertychange Seems to be the best scenario for listening for changes in the input box values.

The original code:

$ (". Ui-searchbar-input input"). KeyUp (function () {
////
});

The Modified code:

$ (". Ui-searchbar-input input"). Bind ("Input", function () {

////

});

After this change, iOS will be OK ~ ~ ~

2, use Touchstart, Touchmove, touchend cause the page cannot slide

There is a teardrop-like picture on the page, require horizontal drag to change the balance display, naturally think of is to use Touchstart, Touchmove, touchend to fix, because it is the first use, can not be lazy, from the Internet to find some use code to mend, change to their desired effect , the following is the initial code, which is the culprit that causes the page not to slide:

　　

$ ("#img-balance"). On ("Touchstart", function (e) {
var touches = e.touches[0];
OW = Touches.clientx-$ (this). Offset (). Left;
OH = Touches.clienty-$ (this). Offset (). Left;　　　　
$ (document). On ("Touchmove", function (event) {
Event.preventdefault ();
}, False);
});
$ ("#img-balance"). On ("Touchmove", function (e) {
var touches = e.touches[0],
Oleft = Touches.clientx- OW;　　　　
if (Oleft <) {
Oleft =;
} else if (Oleft > document.documentelement.clientwidth-45) {
Oleft = document.documentElement.clientWidth- 45;　　　　
}

$ (this). CSS ("left", Oleft + "px");
Mainmodule.showbalance (0);
});
$ ("#img-balance"). On ("Touchend", function () {
$ (document). Off ("Touchmove", function (event) {
Event.prev Entdefault ();
}, False);
});

The above code can finish the effect I want, play on the computer good, the results on the phone on the kneeling, the original can swipe up and down the page, as long as a sliding picture, the page can not swipe up and down, and then check the code, Said completely unclear why in Touchstart and touchend inside tied Touchmove event, this may also be the abuse of code others, because do not know the reason, simply put those two pieces of code to delete, the results page inexplicably full of blood resurrection, the following is the revised code:

$ ("#img-balance"). On ("Touchstart", function (e) {
var touches = e.touches[0];
OW = Touches.clientx-$ (this). Offset (). Left;
});
$ ("#img-balance"). On ("Touchmove", function (e) {
var touches = e.touches[0],
Oleft = Touches.clientx-ow;
if (Oleft < 2) {
Oleft = 2;
} else if (Oleft > Document.documentelement.clientwidth-35) {
Oleft = document.documentelement.clientwidth-35;
}

$ (this). CSS ("left", Oleft + "px");
Mainmodule.showbalance (0);
});

Because delete off code after touchend inside almost nothing, simply put Touchend also deleted, found not affect the effect, stole the music, after the verification found that the page can not slide, is because the Event.preventdefault () The default behavior of the event is blocked (page swipe??? ), so it's good to erase it.

3, some mobile phone slide is not smooth

The sliding refresh in the page uses the Iscroll, depressed is my peripheral everyone's mobile phone slippery is smooth not to want, only my, completely not move, the card is crazy, because only my mobile phone has this problem, so I put it in the project finally to solve, Even holding the only I a coverage may not fix the problem of small luck, now think really ashamed (mainly by my next Daniel said, "You have to know that there is a you, there are thousands of you", you win).

In the online search when found that there are thousands of me, found that many people have encountered this problem, which I think the credibility of the higher https://www.zhihu.com/question/21938954, CSDN (HTTP/ blog.csdn.net/bbsyi/article/details/50915049, http://blog.csdn.net/ml01010736/article/details/50999335), etc., There are also some non-well-known sites, have commented that the feasible solution, no outside is the following several (more is to be summed up):

1) iscroll v5.1.3 momentum:true (I use the Iscroll version is not so high, so I have not tried this method, I do not know whether it is feasible)

2) Turn off the Probetype property (legend has it that the performance of the monitoring scrolling state is very expensive, the sliding of this property will be much smoother)

3) Add CSS style to scroll element:-webkit-transform:translate3d (0,0,0);

In the above 3 ways, I tried the following two, the project Iscroll initialized to:

_myscroll = new Iscroll (' #wrapper ', {
Probetype:3,
Mousewheel:true,
Click:true
});

The DOM in wrapper is:

<div id= "wrapper" >
<div id= "Scroller" >
<div id= "Scroller-pulldown" >
<span id= "Down-icon" class= "Icon-double-angle-down Pull-down-icon" ></span>
<span id= "pulldown-msg" class= "pull-down-msg" > Dropdown refresh </span>
</div>
<div id= "Scroller-content" >
<div class= "Div-list" >

</div>
</div>
<div id= "Scroller-pullup" >
<span id= "Up-icon" class= "icon-double-angle-up Pull-up-icon" ></span>
<span id= "pullup-msg" class= "pull-up-msg" > Pull-up Refresh </span>
</div>
</div>
</div>

First of all, to scroll elements to add CSS style, scroll element is #scroller, the morning to do the test is #scroller-content (ah ah ah ah Ah!!!) It is only now that the element has been selected incorrectly, and it is not known if this is the cause of the third method that did not take effect (doubtful).

The second method, commenting out the Probetype attribute at the time of instantiation, finds, however, no use ... Then opened the vast network of fishing needle action.

Finally, a viable approach was found on CSDN (http://blog.csdn.net/ml01010736/article/details/50999335):

Document.addeventlistener (' Touchmove ', function (e) {E.preventdefault ();}, False);

Occasionally, there is a small episode in the middle, in order to solve the sliding problem, once the silly doubt is not written fastclick reasons, and later added and did not solve the problem, but also forgot to delete, also led to the next a tag need to click multiple times to jump link problem, depressed ...

Add this code, my phone page finally is smooth smoothly, ha ~ comfortable ~ like to encounter this time can solve the problem

Here are the questions:

1, in the resolution of Touchstart, Touchmove, touchend caused by the problem in passing solved an unknown bug, this page has an input box, every time the input box began to enter data after the page will be white screen, leaving only the lonely cursor flashing there, Input Click Finish after the page is displayed, this is only the problem on iOS, it is strange that has not started to find the reason, resolved the page card dead after the problem is also inexplicably disappeared, simply supernatural ...

2, the time to solve the last problem because of the fastclick, and caused my brain storm, Fastclick can solve the mobile side of the 300ms delay problem, it is supposed that I added after the click should be faster than before the response, Why do you need multiple clicks to jump links????

To do this summary of the time is already the project version of the evening 8 o'clock, overtime dog has been crying faint in the toilet, this time the project I learned a lot of good things, although even added two weeks of the class, after all, no desire, it does not matter.

Summary of issues encountered on mobile H5 pages