Question

我有一个简单的CSS的PHP Web应用程序。当我在Android平板电脑上运行该应用程序并尝试登录时，弹出软触键盘并隐藏我的文本输入字段。我已经尝试搜索堆栈溢出类似的问题，但所有问题都与asp.net有关。没有特别提到其他语言。我尝试过使用以下解决方案，但没有工作：

//在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);               
     });
}

或
//在css文件中添加

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

请帮助。
感谢

Answer 1

我为你准备了一个小提琴，也许你可以使用它：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();
    }
};

我不会使用滚动窗口本身，而是使用页面包装容器（在我的示例中为 #viewport ）。

Answer 2

这是反应代码，您可以将其放在根组件中。例如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' });
  }
};

Android软触键盘隐藏输入字段

2 个答案: