CODEWITHSUNDEEP
htmlcssandroid-layout
ph1409
ph1409

Reputation: 113

Android soft touch keyboard hides input fields

I have a PHP web application with simple css. When i run that application on Android tablets, and try to login, soft touch keyboard pops up and hiding my text input fields. I have tried searching on stack overflow for similar issues but all questions are related to asp.net. nothing specifically mentioned about other languages. I have tried putting foloowing solution but didnt work:

//added this on document.ready function

if(navigator.userAgent.indexOf('Android') > -1){           
     $('html').css({ "overflow": "auto !important" });
     $('body').css({ "height": "auto !important" });
     $('body').css({ "overflow": "auto !important" });
     $('.scrollable').css({ "position": "inherit !important" });
     $('body').on('focusin', 'input, textarea', function(event) {
          //alert("test");
          var scroll = $(this).offset();
          window.scrollTo(0, scroll);               
     });
}

or
//added in css file

html { 
   overflow: auto; 
} 
body { 
   height:auto; 
   overflow: auto; 
} 
.scrollable { 
   position:inherit; 
}

Please help.
Thanks

Upvotes: 7

Views: 6109

Answers (2)

王維新 Daky
王維新 Daky

Reputation: 1

here is the react code here, you can put inside your root component. ex. src/App/index.js

componentDidMount() {
  window.addEventListener('resize', this.handleKeyboardAvoiding);
}
componentWillUnmount() {
  window.removeEventListener('resize', this.handleKeyboardAvoiding);
}
handleKeyboardAvoiding = () => {
  const focusedElement = document.activeElement;
  if (focusedElement.tagName.toLowerCase() === 'input') {
    focusedElement.scrollIntoView({ behavior: 'smooth' });
  }
};

Upvotes: 0

Seika85
Seika85

Reputation: 2021

I prepared a fiddle for you, maybe you can use it: https://jsfiddle.net/fe82uhrp/1/

JS:

/***** using jQuery *****/

$('input').focus( function() {

    var $input = $(this);
    $input.css('background', 'yellow');

    var scroll = $input.offset();
    $input.closest('#viewport').animate({
      scrollTop: $input.offset().top
    }, 'slow');
});


/***** using plain JS *****/

var viewport = document.getElementById('viewport');
var allInputs = document.getElementsByTagName('input');
for( var i=0; i<allInputs.length; i++) {

    var item = allInputs[i];
    console.log('set focus event handler on', item)
    item.onfocus = function() {
        this.style.background = "yellow";
        item.scrollIntoView();
    }
};

I wouldn't use scrolling the window itself, but a page wrapping container (#viewport in my example).

Upvotes: 4

Related Questions