The search function in MUI is useful as a search box

<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>Copy the code

But it has a bug, that is, there is no problem on PC or Android, one click on Android can pop up the input method, but in Apple ios generally need to click twice to pop up the input box, what is the reason?

Cause analysis:

This requires a closer look at what is the page element

A review of the element will show that the muI on the page has automatically added a MUi-placeholder overlay to the input because it is absolutely positioned and the Z-index is still 1

Mui means put a placeholder on the input, and when you click on the placeholder, add classes to make the placeholder disappear, and that’s in the source code, so I’m not going to paste it.

The idea was that once the mask disappeared, it would be exactly like clicking on the input and calling up the input box

On android, the idea is true, because there’s no delay for events but on ios, because ios has a 300ms delay mechanism, which makes mui-placeholder mask layers disappear with a 300ms delay, so the natural click event doesn’t land on the input, so the first input doesn’t pop up.

When clicked a second time, the mask is gone, so clicking on the input method succeeds.

Solution:

Method 1: Because it is caused by ios event delay mechanism, you can introduce FastClick to make the delay mechanism disappear, this specific can be Baidu, I am more interested in the second method

Method 2: Now that mui-placeholder is disappearing so slowly that it’s blocking the input click, you can just go through it and click the layer below it and use point-events in your CSS

pointer-events:  auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit
Copy the code

Point-events is mainly used to determine click location in SVG, but the browser only supports three values: Auto, None, and inherit

Detailed description of the pointer-events attribute value

Auto — The effect is the same as if the pointer-events attribute was not defined, and the mouse does not penetrate the current layer. In SVG, this value has the same effect as visiblePainted.

None — The element is no longer the target of mouse events, and the mouse is no longer listening for the current layer but for elements in the layer below. But if its child element has pointer-events set to some other value, such as auto, the mouse will still listen for that child element.

That is, whoever sets pointer-events: None will ignore this element and click directly on the element below. Such as:

<! 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>Copy the code

When the three elements overlap, I click on the top element and 333 pops up, noting that the input of the first layer is blocked and can’t be focused

When I set div3 to Point-Event: None and click 222, div3 is completely ignored. Input is still out of focus due to div2 blocking

.div3{ width:200px; height:200px; background:none; position: absolute; left:0; top:0; z-index: 1; display: inline-block; pointer-events: none; }Copy the code

When I click on input with div2 set, 111 pops up and input is focused, which means div2 and div3 are not present.

.div2{ width:200px; height:200px; background:none; position: absolute; left:0; top:0; z-index: 1; display: inline-block; pointer-events: none; }Copy the code

Solutions:

Add point-events: None to the MUi-placeholder CSS and it will be ignored, i.e. hit the INPUT directly

.mui-search .mui-placeholder {
	pointer-events: none;
}
Copy the code

In this way, both Android and ios input methods can be called up at once

PS: the method is simple, the key is that the process of exploring the truth is fun ^_^