zoukankan      html  css  js  c++  java
  • 钉钉开发笔记(5)android系统中html软键盘的适配

    最近项目中发现个别Android手机中存在弹出的软键盘会遮挡输入框的现象,最后自己写了一个方法(如下),问题基本解决。

    记录下来,防止忘记。有什么不对的地方欢迎指正。O(∩_∩)O

     1 //键盘适配
     2 console.log(navigator.platform);
     3 $('input ,textarea').focus(function() {
     4     var keyString = navigator.platform.toLowerCase();
     5     console.log('keyString =' + keyString);
     6     if(!/iphone/.test(keyString)) {
     7         console.log('keyString=' + keyString);
     8         var bottom = $(this).offset().top + $(this).height() - $(window).height();
     9         var space = bottom - $(document).scrollTop();
    10         var spaceHeight = $(window).height() / 2.1; //画面移动距离
    11 
    12         if(Math.abs(bottom) < spaceHeight) {
    13             $('body').animate({
    14                 'padding-bottom': spaceHeight + 'px'
    15             }, function() {
    16                 window.scrollTo(0, bottom + spaceHeight + 20);
    17             });
    18         } else {
    19             if(Math.abs(space) < spaceHeight) {
    20                 $('body').animate({
    21                     'padding-bottom': spaceHeight + 'px'
    22                 }, function() {
    23                     window.scrollTo(0, bottom + spaceHeight);
    24                 });
    25 
    26             } else {
    27                 $('body').animate({
    28                     'padding-bottom': fBodyBttom
    29                 });
    30             }
    31         }
    32     }
    33 
    34 });
    35 
    36 $('input ,textarea').blur(function() {
    37     $('body').animate({
    38         'padding-bottom': fBodyBttom
    39     });
    40 });
  • 相关阅读:
    设计模式-抽象工厂模式
    装修预算-资料收集
    SQL中存储过程和函数的区别
    View
    数据表优化
    Entity Framework 基础
    html5标准
    JS整数验证
    vue 页面切换从右侧切入效果
    vue动态设置Iview的多个Input组件自动获取焦点
  • 原文地址:https://www.cnblogs.com/tig666666/p/6373426.html
Copyright © 2011-2022 走看看