Summary of problems encountered on the mobile terminal H5 page, summary on the terminal h5 page

Summary of problems encountered on the mobile terminal H5 page, summary on the terminal h5 page

I have just finished a mobile project recently. The product is invincible and the process is difficult. I will not talk about it. I will record the problems encountered in this project, just in case, although these problems may have been solved by more than N's predecessors, they have also been put here, paving a small stone for their long front-end road, at the end of the article, I also left questions that I could not solve. I hope my friends can solve the problem.

I know that I am working on mobile development and debugging on my computer. It may take a second to put something in my cell phone. I swear I never expected it to be so fast...

1. IOS does not listen for keyup events that cannot input Chinese characters in the input box.

This title does not seem very clear, probably because there is a list display page in the APP, there is a search function on the page, using keyup to listen to the input box, each keyup searches for the cached data. However, rangoose and IOS do not search for the cached data, IOS input methods (whether third-party or self-contained) can detect English or numbers keyup, and cannot detect Chinese keyup (as for punctuation, we will not go into details ), after Entering Chinese characters, you need to click the "back" button to start searching. the method I can think of myself is to regularly check setInterval. I can only think of this method, but I always think it is not very good, so I found this method (http://blog.csdn.net/lytlx/article/details/50845259) and changed the keyup event to the "input" and "propertychange" events.

Oninput isHTML5The standard event is very useful for detecting content changes that occur through the user interface of textarea, input: text, input: password and input: search elements. It is triggered immediately after the content is modified, unlike the onchange event, it is triggered only when the focus is lost.OninputThe compatibility of events in mainstream browsers is as follows:

 

　　

　　OninputThe event is not supported in IE9 or earlier versions and must be replaced by the onpropertychange event unique to IE. This event is triggered when the user interface is changed or the content is directly modified using a script, there are several situations:

• The status of the input: checkbox or input: radio element is modified, and the checked attribute is changed.
• The value Attribute of the input: text or textarea element is changed.
• The selected items of the select element are modified, and the selectedIndex attribute changes.

When listeningOnpropertychangeAfter the event, you can use the propertyName attribute of the event to obtain the name of the property that has changed. In this case, oninput & onpropertychange seems to be the best solution to listen for changes in the value of the input box.

Original code:

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

Modified code:

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

////

});

After this change, IOS will also be normal ~~~~

2. The page cannot be slide due to touchstart, touchmove, and touchend.

There is a drop-down image on the page, requiring horizontal drag to modify the balance display, naturally think of is to use touchstart, touchmove, touchend to deal with, because it is the first time to use, will inevitably be lazy, I found some code on the Internet to fix the problem and change it to the desired effect. The following is the initial code, which is the culprit of page slide failure:

　　

$ ("# 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 <20 ){
OLeft = 20;
} Else if (oLeft> document.doc umentElement. clientWidth-45 ){
OLeft = document.doc umentElement. clientWidth-45;
}

Optional (this).css ("left", oLeft + "px ");
MainModule. showBalance (0 );
});
$ ("# Img-balance"). on ("touchend", function (){
$ (Document). off ("touchmove", function (event ){
Event. preventDefault ();
}, False );
});

The above code can achieve the desired effect, play well on the computer, and put the result on the mobile phone and kneel, the page that was originally able to slide up and down, as long as a slide picture, the page won't be able to slide up or down. After checking the code, it means that it is completely unclear why the touchmove event should be bound to touchstart and touchend. This may also be the disadvantage of copying others' code, because I don't know why, I simply deleted the two pieces of code, and the result page was inexplicably full of blood. The following is the modified 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.doc umentElement. clientWidth-35 ){
OLeft = document.doc umentElement. clientWidth-35;
}

Optional (this).css ("left", oLeft + "px ");
MainModule. showBalance (0 );
});

Because after removing the off code, there is almost nothing in the touchend. Simply delete the touchend. If it does not affect the effect, it will be a pleasure. After verification, it is found that the page cannot be slide, this is because of the event. preventDefault () blocks the default event behavior (page sliding ???), So, just delete it.

3. Some mobile phones do not slide smoothly.

Iscroll is used for sliding and refresh on the page. The depressing thing is that all the mobile phones around me are smooth and don't need it. Only my mobile phones are completely flushed, and they get so crazy, because only my mobile phone has this problem, I put it at the end of the project to solve it. Even with only one coverage, I may not be able to fix it, it's really embarrassing to think about it now (the Daniel next to me said, "you need to know that there are thousands of you if you have one." You won ).

I found on the Internet that there are thousands of me, found that many people have encountered this problem, which I think the credibility of high knowledge (https://www.zhihu.com/question/21938954), CSDN (http://blog.csdn.net/bbsyi/article/details/50915049, http://blog.csdn.net/ml01010736/article/details/50999335) and so on, there are some unknown websites that all give comments about feasible solutions, nothing more than the following (mostly known as summary ):

1) iScroll v5.1.3 momentum: true (the iscroll version I use is not so high, so I have not tried this method and I wonder if it is feasible)

2) disable the probeType attribute (it is said that this feature is very performance-consuming to enable the listener's rolling status, so it will be much smoother to close this attribute slide)

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

The above three methods are available. After the test, the iscroll in the project is initialized as follows:

_ 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"> pull-down 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 and refresh </span>
</Div>
</Div>
</Div>

First, add a css style to the scroll element. The scroll element is # scroller. in the morning for testing, use # scroller-content (ah, ah, ah !!!) Only now can we find that the element has been selected incorrectly. I don't know if this is the cause. The third method does not take effect (suspect ).

Method 2: comment out the probeType attribute during instantiation. However, it is useless... As a result, the needle fishing operation on the Internet was started.

Finally, CSDN (http://blog.csdn.net/ml01010736/article/details/50999335) found a feasible way:

Document. addEventListener ('touchmove ', function (e) {e. preventDefault () ;}, false );

Even, there was an episode in the middle. To solve this slide problem, I was so dumb that I was wondering if I didn't write fastclick. Later I added the question that I didn't solve it, and I forgot to delete it, it also causes the problem that the next a tag needs to be clicked multiple times to jump to the link. It is depressing...

After this code is added, my mobile phone page is still smooth ~ Comfortable ~ I like the problem that can be solved in time.

The following are the issues:

1. Fixed an unknown bug in touchstart, touchmove, and touchend. There is an input box on this page. When the input box starts to input data, the page will be displayed in white, only the lonely cursor is flickering, and the page is displayed after the input and click are complete. This is only a problem on IOS. The strange thing is that the cause is not found yet, after the page freezing event is solved, this problem is also inexplicably lost. It's just a different spirit...

2. When fastclick was added to solve the last problem, it triggered my brainstorm. fastclick can solve the MS latency problem on mobile terminals, it is reasonable to say that after I add the button, it should be a little faster than the previous response. Why do I need to click the button multiple times to jump to the link ????

In this summary, the project version was released at, and the overtime dog was crying and dizzy in the toilet. I learned a lot about this project, although I joined the team for two weeks, after all, it doesn't matter if you have no desire.