Framework7: Android keyboard overlay on bottom textarea

[tekkenking]

I observed when textarea at the bottom of the screen gain focus, keyboard overlay the textarea instead of pushing it up for the user to see what he's typing..

Anyway to correct this issue.

Thanks in advance

[tekkenking]

A new observation with this behavior.

I did some research and got some people with the same problem focusing on Phonegap as the culprit, while very few accused JQM.

But i don't think that is the same with me here. When i tried the same Phonegap build with JQM 1.4 there was no issue. Then i reverted back to Framework7 but the issue persist. Then i viewed the app in Google Chrome browser on Android 4.4, still got the problem of keyboard overlay.

Then i realized that, when the keyboard overlays and you hit "spacebar key" the Input field automatically comes up on the screen as it should have.

So am thinking if there's a way a script can be written, that looks out for input fields when focused and auto add "spacebar key" once. Probably it might work as a temporary solution.

Thanks in advance

[nolimits4web]

There is no way to emulate spacebar keyboard button. But if you use it in Phonegap you may use Cordova Keyboard plugin, it allows to change a bit behavior of keyboard

[tekkenking]

Would check that out. Thanks

[tekkenking]

I finally solved the issue with a scrollTo jquery plugin..
Thanks for your suggestion about the keyboard plugin though.

[Premke]

@tekkenking I have the same issue and can't solve it with scrollTo. Can you please provide fiddle or code of your solution?

Scripts:

• Framework7 v1.4.2
• jQuery.scrollTo v2.1.2

[Premke]

Found other solution on internet using code:

myApp.onPageInit('index', function (page) {
  // Fixes android keyboard overlay on bottom textarea even if textare is used on
  // some other page, reason unknown. See http://stackoverflow.com/a/21316252 for
  // more info.
  document.body.style.height = window.outerHeight + 'px';
  // ...rest of your code.
});

[yixiaohuan]

Hey guys. I searched a lot these days. At last I got one solution.
I use Cordova + Framework7(Vue edition) + Crosswalk.

Here is my code.

First, edit platforms/android/androidManifest.xml, set softInputMode = adjustResize(because adjustPan doesn't work correctly at my android phone. version is 6.0)
<application ... android:windowSoftInputMode="adjustResize">...</application>

and then, at main.js, in the vue mounted callback, add these code and it will work

var $$ = this.$$;
var myApp = this.$f7;
//initialize scrren height;
var screenHeight = document.body.clientHeight;
var intervalCount = 0;
var interval = undefined;
$$(document).on("focus", "input,textarea", function (e) {
  //clear former interval if exists
  if(interval != undefined){
    intervalCount = 0;
    clearInterval(interval);
  }

  interval = setInterval(function(){
      intervalCount += 1;
      if(intervalCount > 200 || document.body.clientHeight != screenHeight){
          intervalCount = 0;
          if(interval != undefined){
              clearInterval(interval);
          }
          //keyboard resize the screen
          var el = $$(e.target);
          var page = el.closest(".page-content");
          var elTop = el.offset().top;
          //do correction if input at near or below middle of screen
          if (elTop > page.height() / 2 - 20) {
              var delta = page.offset().top + elTop - $$(".statusbar-overlay").height() * (myApp.device.ios ? 2 : 1) - $$(".navbar").height();
              page.scrollTop(delta, 300);
          }
      }
  }, 10);
}, true);

If you want better user experience, you can get keyboard height by this

//after keyboard resize the screen
var keyboardHeight = window.screen.height - document.body.clientHeight;

you can store the keyboard height as a constant value.And use this to recompute the scroll height. I'm sure you can set the scroll offset at a better value.

[lcaprini]

@yixiaohuan Thank you. Your solution is great.
I've made only two edits:

• used click event instead focus: when keyboard is open and I tap on back button the keyboard hides, but the focus remain on textarea. If I tap a second time on textarea the keyboard appears, but focus event if not fired again. With click works everytime.
• mixin: I've created a VueJS mixin with your code, so I can use it in every page/components that contains input or textarea field.

Here the result (sorry for ES6 translation, but I'm using in my project):

const keyboardFixMixin = {
    mounted() {
        const $$ = this.$$;
        const myApp = this.$f7;

        // initialize screen height;
        const screenHeight = document.body.clientHeight;
        let intervalCount = 0;
        let interval;
        $$(this.$el).on('click', 'input, textarea', e => {
            // clear former interval if exists
            if (interval) {
                intervalCount = 0;
                clearInterval(interval);
            }

            interval = setInterval(() => {
                intervalCount += 1;
                if (intervalCount > 200 || document.body.clientHeight !== screenHeight) {
                    intervalCount = 0;
                    if (interval) {
                        clearInterval(interval);
                    }

                    // keyboard resize the screen
                    let el = $$(e.target);
                    let page = el.closest('.page-content');
                    let elTop = el.offset().top;

                    // do correction if input at near or below middle of screen
                    if (elTop > page.height() / 2 - 20) {
                        let delta = page.offset().top + elTop - $$('.statusbar-overlay').height() * (myApp.device.ios ? 2 : 1) - $$('.navbar').height();
                        page.scrollTop(delta, 300);
                    }
                }
            }, 10);
        }, true);
    }
};
export default keyboardFixMixin;

[araimbekoff]

Yeeeaaah! @lcaprini, @yixiaohuan - super!

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.