Sign in

When the IOS input cursor is erratic / the soft keyboard is retracted, the content is pushed up and the bottom is blank?

Ampersand edited in Thu, 28 Jul 2022

Pre statement: This is not my project's map, stolen map

**1. This picture is the same as my first one. I can't see everything when I input it. After input, I can see out of focus. When you delete (rewind), it's the same. The cursor disappears to the end, and the text is still there. However, if you lose focus, you will find that it's all cleared. **


  1. The second problem is that when the IOS input soft keyboard is taken back, the content of the page is left blank, which is the height of the soft keyboard. Slide up and down a few times before this one returns to its original state.

PS: I searched a lot of answers, almost all of them are fixed questions. What I want to say is that in order to avoid this from the beginning, the main page used position : absolute ; Then the input uses the flex of weui. Input operation is also carried out directly on the page, without pop-up window.

I'm speechless. Please help me~

2 Replies
commented on Thu, 28 Jul 2022

The first problem has been solved. I have found a lot of ways on the Internet, basically speaking about fixed positioning. However, in order to avoid this problem, my initial positioning was absolute.

So, basically looking for a few days, the online answer is useless. Finally, I find a similar answer here, that is, I move a little bit every time I input, as well as when I lose focus.

As a result, the living horse as a dead horse doctor, I try to succeed. The code is as follows:

this.inputStatus = false; // 这个状态将保证我来回移动

// 此代码加在input事件中,focus也行。
// 保证在输入的时候,不断的向上向下移动,在PC端上测试的时候,感官看到移动还是很明显的。
// 但是,在手机上测的时候,看着就没移动的样子,但是,问题却实实在在解决了。
if (this.inputStatus) {
      document.documentElement.scrollBy(0 , -1);
      document.body.scrollBy(0 , -1);
      this.inputStatus = false;
    }else {
      document.documentElement.scrollBy(0 , 1);
      document.body.scrollBy(0 , 1);
      this.inputStatus = true;

I hope I can help you.

commented on Fri, 29 Jul 2022

</template> <input type='text' @Blur='iOSKeyboardFixer'/></template><script>export default {...methods: {iOSKeyboardFixer (e) {if (!IOS()){return} window.scrollTo (0, 0) window.scrollTo (0, (e. target.getBoundingClientRect ().top))}}}</script>