The iOS input is solved by the soft keyboard scheme covering problem

Objective:

And there is no perfect solution!

Scene:

Recently in the Enterprise H5 a project, there is a dynamic list page, the beginning of the input box is hidden, click on the comment will appear and let input focus. There should be no problem with the test on Android, but iOS will have a condition where input is obscured by a soft keyboard or half-covered, or even sent buttons cannot be clicked.

Overall the problem is a little bit serious.

Search Baidu:

OK, Baidu a search, wow! A lot of solutions, I was relieved to smoke a cigarette, think of minutes to finish. But after testing Baidu "iOS input is covered by a soft keyboard" the first two pages no one can solve my problem!!!

But the harvest is still there ... The reference article is as follows (wrote three comparison OK)

66471962

Https://juejin.im/post/5b0401b2f265da0b71569ca0

Https://www.cnblogs.com/wx1993/p/6059668.html

Solution (Vue):

Because the soft keyboard pop-up in IOS does not change the window height, it does not try to listen for the Resize event of Windows.

The first (n-2) is when the input box gets the focus:

// input box gets focus     onfocus () {      varthis;      SetTimeout (function() {        That.sendText.scrollIntoView (true);        That.sendText.scrollIntoViewIfNeeded ();      },    

scrollIntoView (True): Scrolls the browser window or container element so that the current element is seen in the visible extent of the current window.

Have effect, but still have the problem, occasionally still will appear half cover of circumstance iPhone6 especially obvious.

The second (n-1) is the method used to scroll to the bottom, because the dynamic list of items is paged, so the appropriate change.

created () {varU =navigator.useragent;  This. Isandroid =u.indexof ("Android") >-1 | | U.indexof ("Adr") >-1;//Android Terminal     This. Isios =!! U.match (/\ (i[^;] +;( U;)? Cpu.+mac OS x/);//iOS terminal},methods:{//input box gets focusonfocus () {varthat = This;  This. bfscrolltop = Document.body.scrollTop;//record the current location      if( This. Isios) {SetTimeout (function() {Document.body.scrollTop= document.body.scrolltop*1 + 200; },300)      }    },},

When you click Send, set: Document.body.scrollTop = This.bfscrolltop;

Problem:

1, when listening to lose focus when set Document.body.scrollTop = This.bfscrolltop is not able to send (this touches the blind spot of my knowledge)

2, iOS regardless of the model (may be in addition to SE) the first click on the review or may appear semi-covered, or full coverage of the situation.

The nth time I added a timer when I clicked on a comment (I don't know why I wrote it!) )

created () {varU =navigator.useragent;  This. Isandroid =u.indexof ("Android") >-1 | | U.indexof ("Adr") >-1;//Android Terminal     This. Isios =!! U.match (/\ (i[^;] +;( U;)? Cpu.+mac OS x/);//iOS terminal},methods:{//Click to reviewCommentclick (index) {varthat = This; if( This. Isios) {SetTimeout (function() {Document.body.scrollTop= document.body.scrolltop*1 + 300; },300)} that. $refs. Import_inp.focus (); },    //input box gets focusonfocus () {varthat = This;  This. bfscrolltop = Document.body.scrollTop;//record the current location      if( This. Isios) {SetTimeout (function() {Document.body.scrollTop= document.body.scrolltop*1 + 200; },300)      }    },    //The input box loses focusChangeblur () {varthat = This; //Click on the iOS soft keyboard to finish without content in input box .      if( This. Inputval = = "") {Document.body.scrollTop= This. Bfscrolltop; }    },    //Click Sendsendcomment () {Document.body.scrollTop= This. Bfscrolltop; },},

　Note: The above code is just about the input box being obscured.

There's nothing wrong with IPhone7 IPhone6 Iphonese.

Problem:

1, when there is content in the input box, turn off the soft keyboard is not return to the location of the record

Summarize:

This is the only point that can be solved at present. Wit

What good solution is also looking to see friends pointing twos.

Choose one of the best possible solutions to your project problems

The iOS input is solved by the soft keyboard scheme covering problem