【小贴士】zepto find元素以及ios弹出键盘可能让你很头疼


前言

在此,我不得不说移动端的兼容问题很多,并且很令人头疼,这不,这个星期又有两个让我逮着了,一个是使用zepto过程中出现的问题,一个是ios虚拟键盘的问题

我这里做一次记录,以免以后忘了,同时希望对后面做移动开发的朋友有一定帮助,首先,我们调一个简单的来说

zepto与querySelectorAll

首先,W3C提供了新的查询接口,querySelector与querySelectorAll

其中querySelector返回的是一个对象选择第一个对象,querySelectorAll返回的一个集合(NodeList)

以百度首页来说,会出现这样的现象:

【小贴士】zepto find元素以及ios弹出键盘可能让你很头疼

其他地方可能还会说道queryselectorAll的BUG,那些我暂且不关注,这简单拷贝下别人的就说下我遇到的问题

 1 <div id="test1"><a href="http://www.hujuntao.com/">设计蜂巢</a></div>
 2 <p id="bar">111</p>
 3 <script>
 4 var d1 = document.getElementById('test1'),
 5 obj1 = d1.querySelector('div a'),
 6 obj2 = d1.querySelectorAll('div a');
 7 obj3 = $(d1).find('div a');
 8 console.log(obj1) //<a href="http://www.hujuntao.com/">设计蜂巢</a>
 9 console.log(obj2.length) //1
10 console.log(obj3) //null
11 </script>

从这个例子来说,querySelectorAll实现是有问题的,但是我们暂时不关注他

因为,我们的项目是单页应用,所以不可避免的,view与view之间可能出现id重复,这个时候使用zepto的选择器会不会遇到问题呢?

var el = $('#el')//获取元素
var node = el.find('......')

答案当然是会的,并且是在IOS7下面会遇到问题,不得不说乔帮主一死,丐帮堕落了……

前段时间Arron做过一个研究

var element   = $('<div id = "aaron">...填充大量结构...</div>');

$(root).html(element)

$('#aaron')  //为空
这个是很简单的一段代码,按照常规的认识,JS主线程与GUI的渲染线程是互斥的,所以在执行JS的时候,GUI应该就是挂起的, 同理执行GUI的时候亦然, 因为JS可以动态操作节点,所以如果我们在GUI绘制的时候做操作明显就会打乱了,所以互斥的解释也合理
但是实际上这样并不能直接获取到$('#aaron'),PC上基本不会出现,常规的办法都是加setTimeout

这个例子旨在说明在移动端获取元素会出问题,这不这个星期我马上遇到了一个问题,并且和上面的情况还不一样呢:

在IOS7下面,View之间的切换后,如果此时操作了DOM,并且view之间有一个重复id元素,并且我们还会用到
则此时this.$el.find('#id')这个会选取到两个元素......

PS:其中$el为backbone render时候返回的html元素,

这是一个什么问题呢?简单来说如下:

<div id="foo">
   <p id="t">This is a sample error</p>
</div>
<div id="foo1">
   <p id="t">This is a sample error</p>
</div>
var el = document.getElementById('#foo')
el.querySelectorAll('#t')

这个在IOS7下有一定几率会返回一个数组,并且里面装的是两个元素(意思是两个id为t的元素都被选出来的了……)

这个就是我们遇到的一个问题,应该说这个问题很隐蔽,于是我就看了下zepto里面的实现:

 1 zepto.qsa = function(element, selector){
 2     var found,
 3         maybeID = selector[0] == '#',
 4         maybeClass = !maybeID && selector[0] == '.',
 5         nameOnly = maybeID || maybeClass ? selector.slice(1) : selector, // Ensure that a 1 char tag name still gets checked
 6         isSimple = simpleSelectorRE.test(nameOnly)
 7     return (isDocument(element) && isSimple && maybeID) ?
 8       ( (found = element.getElementById(nameOnly)) ? [found] : [] ) :
 9       (element.nodeType !== 1 && element.nodeType !== 9) ? [] :
10       slice.call(
11         isSimple && !maybeID ?
12           maybeClass ? element.getElementsByClassName(nameOnly) : // If it's simple, it could be a class
13           element.getElementsByTagName(selector) : // Or a tag
14           element.querySelectorAll(selector) // Or it's not simple, and we need to query all
15       )
16   }

element存在的情况最后使用querySelectAll选取元素,我们这里不是dom不存在而是多选了一个dom,所以这里需要针对ios7做一个适配

 1   zepto.qsa = function(element, selector){
 2     var found,
 3         maybeID = selector[0] == '#',
 4         maybeClass = !maybeID && selector[0] == '.',
 5         nameOnly = maybeID || maybeClass ? selector.slice(1) : selector, // Ensure that a 1 char tag name still gets checked
 6         isSimple = simpleSelectorRE.test(nameOnly)
 7         var doms = (isDocument(element) && isSimple && maybeID) ?
 8       ( (found = element.getElementById(nameOnly)) ? [found] : [] ) :
 9       (element.nodeType !== 1 && element.nodeType !== 9) ? [] :
10       slice.call(
11         isSimple && !maybeID ?
12           maybeClass ? element.getElementsByClassName(nameOnly) : // If it's simple, it could be a class
13           element.getElementsByTagName(selector) : // Or a tag
14           element.querySelectorAll(selector) // Or it's not simple, and we need to query all
15       )
16         //这里需要做判断.......判断逻辑自己去搞
17         var _tmp = [];
18         if(ios7 && element){
19           for(var i = 0, len < doms.length; i < len; i++) {
20             if(element.contains(doms[i])) _tmp.push(doms[i])
21           }
22           return _tmp;
23         } else { return doms }
24   }

这里代码做一下处理,针对IOS7应该就没问题了…….于是进入今天第二个话题

这里给出测试地址:http://sandbox.runjs.cn/show/w5q7inp1

手机弹出虚拟键盘

之前忧患深第一次出剑时候,他说了一句:你见过吾之六凡灭剑么?然后出剑

于是,在此我想问一句:你见过IOS弹不出来键盘么……尼玛真的弹不出来啊!!!碰上fastclick的话更有不一样的感觉

我们在手机上想弹出键盘,需要的就是让文本框获取焦点,文本框获取焦点便会弹出键盘,但是我这里提出一个问题

弹出键盘==文本框获取焦点
文本框获取焦点!=弹出键盘

经过我的研究一定要这种情况下才会弹出键盘:

① 文本框获取焦点

② 手指触屏(网页区域,混合开发触屏app头不能让webview弹出键盘)

③ 没有延迟(不会ajax回调,不会延迟)

我这里举一个例子,并且此例子与fastclick还有一定关系,如果没有关系这里就没有意义了:

http://sandbox.runjs.cn/show/0bmobuyy

如果你使用ios访问这个链接,你会发现,其中的input已经获取了焦点,这个时候你快速的点击文本框就不会弹出键盘

这个情况导致的原因就是文本框已经获取焦点了,再去点击就不会弹出键盘,当然这个情况只是在使用fastclick的情况下

但是,弹出键盘还是得满足以上情况,缺一不可

结语

今天没有用公司的电脑,状态不好,暂时到此


发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>