mui中的search功能做搜索框还算好用
<div id="search" style="position: fixed;top:40px;left:0;">
<div class="mui-input-row mui-search" id="search" >
<input type="search" class="mui-input-clear" placeholder="请输入" v-model="searchIssue">
</div>
</div>
但是它有一个bug，就是在pc或者安卓上没什么问题，一点击安卓上就可以弹出输入法，但在苹果ios中一般需要点两次才能弹出输入框，这是什么原因呢？
原因分析：
这需要仔细看一下页面元素是什么
审查元素后会发现页面上mui自动添加了一个mui-placeholder覆盖在input上，因为它是绝对定位的，而且z-index还是1
mui的意思就是先用个东西罩在input上充当placeholder，当点击这个遮罩时，添加类，使遮罩消失，这个源码上中有，我就不粘贴了。
原本想的是遮罩一消失，正好就相当于点在了input上，就可以调出输入法框了
在安卓上，这个想法是成立的，因为事件相应并没有延迟
但是在ios上，因为ios有一个300ms的事件延迟机制，会使得mui-placeholder遮罩层延迟300ms消失，自然点击事件就没有落在input上面，所以第一次输入法没有弹出。当点击第二次时，因为遮罩已经消失了，所以点击作用在input上，输入法调用成功。
解决思路：
方法一：由于是因为ios事件延迟机制导致，可以引入fastclick使延迟机制消失，这个具体可以百度，我是对第二种方法比较感兴趣
方法二：既然mui-placeholder消失的比较慢挡住了input点击，那就可以穿过它，直接点击它下面的那一层
这就用到了css中的point-events
pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit
point-events主要是svg中确定点击定位用的，但浏览器中只支持三个值：auto,none,inherit
pointer-events属性值详解
-
auto——效果和没有定义pointer-events属性相同，鼠标不会穿透当前层。在SVG中，该值和visiblePainted的效果相同。
-
none——元素不再是鼠标事件的目标，鼠标不再监听当前层而去监听下面的层中的元素。但是如果它的子元素设置了pointer-events为其它值，比如auto，鼠标还是会监听这个子元素的。
也就是说，谁设置了pointer-events：none，那点击此元素时就会忽视此元素，直接点击到了下面那层元素上。
比如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.container{
width:200px;height:200px;margin-left:200px;margin-top:200px;
position: fixed;z-index:100
}
.div1{
width:200px;height:200px;
background:pink;
}
.div2{
width:200px;height:200px;
background:none;
position: absolute;
left:0;top:0;
z-index: 1;
display: inline-block;
/*pointer-events: none;*/
}
.div3{
width:200px;height:200px;
background:none;
position: absolute;
left:0;top:0;
z-index: 1;
display: inline-block;
/*pointer-events: none;*/
}
</style>
</head>
<body>
<div class="container">
<div class="div1">
<input type="text" />
</div>
<div class="div2"></div>
<div class="div3"></div>
</div>
<script type="text/javascript">
var div1=document.querySelector(".div1");
console.log(div1)
var div2=document.querySelector(".div2");
var div3=document.querySelector(".div3");
div1.addEventListener("click",function(){
alert(111)
})
div2.addEventListener("click",function(){
alert(222)
},false)
div3.addEventListener("click",function(){
alert(333)
},false)
</script>
</body>
</html>
三个元素重叠时，我点击最上面元素，弹出的333，注意第一层的input被挡住了，无法聚焦
当我把div3设置point-event:none时，再点击，则弹222，div3相当于完全被忽视了；由于div2挡住，input还是无法聚焦
.div3{
width:200px;height:200px;
background:none;
position: absolute;
left:0;top:0;
z-index: 1;
display: inline-block;
pointer-events: none;
}
当我把div2也设置后，往input上面点击时，弹出111，而且input聚焦成功，相当于div2,div3都不存在一样；
.div2{
width:200px;height:200px;
background:none;
position: absolute;
left:0;top:0;
z-index: 1;
display: inline-block;
pointer-events: none;
}
解决方法：
给mui-placeholder的css加上point-events:none，让他直接被忽略完事，相当于直接被点击在input上
.mui-search .mui-placeholder {
pointer-events: none;
}
这样在安卓和ios输入法都可以一次调出
PS:方法很简单，关键是探索真理的过程很有趣^_^
扫一扫
2879
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
