[Tips] The zepto find element and the ios pop-up keyboard may cause you a headache.

Preface

Here, I have to say that there are a lot of compatibility problems on the mobile end, which is a headache. No, this week I caught two more problems. One is the problems that occurred when I used zepto, one is ios virtual keyboard.

I will make a record here to avoid forgetting it later. I also hope it will be helpful to my later mobile development friends. First of all, let's make a simple introduction.

Zepto and querySelectorAll

First, W3C provides a new query interface, querySelector and querySelectorAll

The querySelector returns the first object of an object and a set (NodeList) returned by querySelectorAll)

For Baidu homepage, this phenomenon may occur:

I may also talk about the queryselectorAll BUG elsewhere. I am not concerned about it for the time being. simply copy the BUG from someone else, let's talk about my problem.

Design honeycomb 111

In this example, the implementation of querySelectorAll is problematic, but we do not pay attention to it for the time being.

 el = $() node = el.find()

The answer is yes, of course, and there will be problems under IOS7. I have to say that the gang is dead, and the gang has fallen ......

Some time ago, Arron did a research.

Element = $ ('<div id = "aaron">... fill in a large number of structures... </div> ''# aaron ')

PS: $ el is the html element returned by backbone render,

What's the problem? To put it simply, follow these steps:

   This is a sample error   This is a sample error

 el = document.getElementById('#foo''#t')

Under IOS7, there is a probability that an array will be returned, and it contains two elements (that is, the elements with two IDs as t are selected ......)

This is a problem we encountered. It should be said that this problem is very concealed, so I read the implementation in zepto:

 zepto.qsa =               maybeID = selector[0] == '#'         maybeClass = !maybeID && selector[0] == '.'         nameOnly = maybeID || maybeClass ? selector.slice(1) : selector,          isSimple =      (isDocument(element) && isSimple && maybeID) ?       ( (found = element.getElementById(nameOnly)) ?       (element.nodeType !== 1 && element.nodeType !== 9) ?          isSimple && !maybeID ?           maybeClass ? element.getElementsByClassName(nameOnly) :            element.getElementsByTagName(selector) :            element.querySelectorAll(selector)     }

When an element exists, querySelectAll is used to select an element. Instead of dom, another dom is selected. Therefore, an adaptation to ios7 is required.

   zepto.qsa =               maybeID = selector[0] == '#'         maybeClass = !maybeID && selector[0] == '.'         nameOnly = maybeID || maybeClass ? selector.slice(1) : selector,          isSimple =          doms = (isDocument(element) && isSimple && maybeID) ?       ( (found = element.getElementById(nameOnly)) ?       (element.nodeType !== 1 && element.nodeType !== 9) ?          isSimple && !maybeID ?           maybeClass ? element.getElementsByClassName(nameOnly) :            element.getElementsByTagName(selector) :            element.querySelectorAll(selector)                     _tmp =         (ios7 &&           ( i = 0, len < doms.length; i < len; i++                                  }  {    }

The code here is used for processing, so there should be no problem with IOS7... so we will enter the second topic today.

Pop-up virtual keyboard on mobile phone

When he first came out of the sword, he said, "Have you ever seen the six of us destroy the sword? Then

So here I want to ask: Have you ever seen a keyboard that cannot be played by IOS !!! Fastclick makes a difference.

To bring up the keyboard on the mobile phone, we need to get the focus of the text box. The keyboard will pop up when the text box gets the focus, but I am asking a question here.

After my research, the keyboard must pop up in this case:

If you use ios to access this link, you will find that the input has obtained the focus, and you will not pop up the keyboard when you click the text box quickly.

The cause of this situation is that the focus has been obtained in the text box, And the keyboard will not pop up when you click again. Of course, this situation is only when fastclick is used.

However, the pop-up keyboard must meet the above conditions.

Conclusion

Today, I didn't use my company's computer. It's in bad state. It's now.