1. Fix position fixed issue $ (' input ') when iOS Safari does not support the input focus pop-up IME. focus (function () {
var _this = this;
Distance from input box to top of browser window without keyboard
var noinputviewheight = $ (window). Height ()-$ (_this). Height ();
Page Body Content Height
var contentheight = $ (document). Height ()-$ (_this). Height ();
Control body content height is greater than one screen, ensure the input box fixed bottom
Contentheight = contentheight > noinputviewheight? Contentheight:noinputviewheight;
Because pop-up input method takes time, need to delay processing
SetTimeout (function () {
The starting scroll distance of the scroll bar when the Input method pops up
var startscrolly = $ (window). scrolltop ();
The distance from the input box to the top of the window when the IME is popped, that is, the starting distance to the top of the soft keyboard
var inputtopheight = $ (_this). Offset (). top-startscrolly;
When the IME is ejected, the input box is expected to position when the soft keyboard is pressed. Because the input box is centered at this point, the distance to the top of the window is the distance you want to move down.
var Inputtoppos = $ (_this). Offset (). Top + inputtopheight;
Control Div does not exceed body range
Inputtoppos = inputtoppos > contentheight? Contentheight:inputtoppos;
Set the input box position to fit into the input box
$ (_this). css ({' position ': ' absolute ', ' top ': Inputtoppos});
Bind scrolling events to a Window object to ensure that the div can adsorb the soft keyboard when the page scrolls
$ (window). bind (' scroll ', function () {
Indicates that there is a soft keyboard at this time, the input box floats on the page
if (inputtopheight! = noinputviewheight) {
After the page slides, the input box must follow the moving distance
var offset = $ (this). ScrollTop ()-startscrolly;
Position after the input box is moved
Afterscrolltoppos = Inputtoppos + offset;
Set the input box position to fit into the input box
$ (_this). css ({' position ': ' absolute ', ' top ': Afterscrolltoppos});
}
});
}, 100);
}). blur (function () {//input box to restore the initial state after losing focus
$ (". Div-input"). Removeattr (' style ');
$ (window). Unbind (' scroll ');
});2. Resolve a transparent gray box when the input and a tags are clicked -webkit-tap-highlight-color:rgba (255,255,255,0);
-webkit-appearance:none;3. Troubleshoot iOS numbers underlined <meta name= "format-detection" content= "Telephone=no"/>
Some of the holes in iOS
