if (!Element.prototype.scrollIntoViewIfNeeded) {
    Element.prototype.scrollIntoViewIfNeeded = function (centerIfNeeded) {
        function withinBounds(value, min, max, extent) {
            if (false === centerIfNeeded || max <= value + extent && value <= min + extent) {
                return Math.min(max, Math.max(min, value));
            } else {
                return (min + max) / 2;
            }
        }

        function makeArea(left, top, width, height) {
            return  { "left": left, "top": top, "width": width, "height": height
                    , "right": left + width, "bottom": top + height
                    , "translate":
                        function (x, y) {
                            return makeArea(x + left, y + top, width, height);
                        }
                    , "relativeFromTo":
                        function (lhs, rhs) {
                            var newLeft = left, newTop = top;
                            lhs = lhs.offsetParent;
                            rhs = rhs.offsetParent;
                            if (lhs === rhs) {
                                return area;
                            }
                            for (; lhs; lhs = lhs.offsetParent) {
                                newLeft += lhs.offsetLeft + lhs.clientLeft;
                                newTop += lhs.offsetTop + lhs.clientTop;
                            }
                            for (; rhs; rhs = rhs.offsetParent) {
                                newLeft -= rhs.offsetLeft + rhs.clientLeft;
                                newTop -= rhs.offsetTop + rhs.clientTop;
                            }
                            return makeArea(newLeft, newTop, width, height);
                        }
                    };
        }

        var parent, elem = this, area = makeArea(
            this.offsetLeft, this.offsetTop,
            this.offsetWidth, this.offsetHeight);
        while ((parent = elem.parentNode) instanceof HTMLElement) {
            var clientLeft = parent.offsetLeft + parent.clientLeft;
            var clientTop = parent.offsetTop + parent.clientTop;

            // Make area relative to parent's client area.
            area = area.
                relativeFromTo(elem, parent).
                translate(-clientLeft, -clientTop);

            parent.scrollLeft = withinBounds(
                parent.scrollLeft,
                area.right - parent.clientWidth, area.left,
                parent.clientWidth);

            parent.scrollTop = withinBounds(
                parent.scrollTop,
                area.bottom - parent.clientHeight, area.top,
                parent.clientHeight);

            // Determine actual scroll amount by reading back scroll properties.
            area = area.translate(clientLeft - parent.scrollLeft,
                                  clientTop - parent.scrollTop);
            elem = parent;
        }
    };
}

  

input 虚拟键盘的更多相关文章

  1. 关于iphone点击readonly的input虚拟键盘不消失的情况

    今天遇到了一个比较棘手的问题,事情是这样的: 咱有一个添加地址的页面,大概长这样: 收货地址后那个"请选择收货地址"是一个readonly的input, 咱一进页面,直接点击这个& ...

  2. 移动端ios针对input虚拟键盘挡住的问题

    写移动端的时候发现input的虚拟键盘对Ios的手机不是很友好 我的是苹果6 点击的时候经常会挡住input框 针对这个问题找了很多发现都没效果 最后发现用下面这段js就可以解决了 $("i ...

  3. 移动H5页面,Android手机下,input获取焦点弹出系统虚拟键盘时,挡住input解决方法

    最近在写移动端页面的时候,遇到一个问题,在Android手机下,虚拟键盘会将input框遮挡住,具体情况如下图所示: 正常页面显示  IOS端显示情况 Android端显示情况 解决方式: <t ...

  4. 移动端H5页面 input 获取焦点时,虚拟键盘挡住input输入框解决方法

    在移动端h5开发的时候,发现如果input在页面底部,当触发input焦点的时候会弹出系统虚拟键盘,虚拟键盘会遮挡input输入框.这会很影响用户体验,于是在网上找到了如下的解决办法: 方法一:使用w ...

  5. 移动端H5页面_input获取焦点时,虚拟键盘挡住input输入框解决方法

    在移动端h5开发的时候,发现如果input在页面底部,当触发input焦点的时候会弹出系统虚拟键盘,虚拟键盘会遮挡input输入框.这会很影响用户体验,于是在网上找到了如下的解决办法: 方法一:使用w ...

  6. Android开发案例 - 自定义虚拟键盘

    所有包含IM功能的App(如微信, 微博, QQ, 支付宝等)都提供了Emoji表情之类的虚拟键盘,  如下图:    本文只着重介绍如何实现输入法键盘和自定义虚拟键盘的流畅切换, 而不介绍如何实现虚 ...

  7. 039. asp.netWeb用户控件之七实现具有虚拟键盘的功能的用户控件

    用户控件ascx代码: <%@ Control Language="C#" AutoEventWireup="true" CodeFile="K ...

  8. JS虚拟键盘

    由于是触摸屏,所以需要一款JS虚拟键盘.上网找了一个好用的VirtualKeyboard,作了修改. 修改该插件参考的博客文章:http://www.cnblogs.com/xinggong/arch ...

  9. 【小贴士】虚拟键盘与fixed带给移动端的痛!

    前言 今天来公司的主要目的就是研究虚拟键盘与fixed的问题,期间因为同事问起闭包与事件委托(阻止冒泡)相关问题,便穿插了一篇别的: [小贴士]工作中的”闭包“与事件委托的”阻止冒泡“,有兴趣的朋友可 ...

随机推荐

  1. JavaScript------表单约束验证DOM方法

    <input id="id1" type="number" min="100" max="300" require ...

  2. STM32 PWM的输出与Keil软件仿真

    导读:PWM(Pulse Width Modulation)控制——脉冲宽度调制技术,通过对一系列脉冲的宽度进行调制,来等效地获得所需要波形(含形状和幅值). PWM控制技术在逆变电路中应用最广,应用 ...

  3. C语言数组的概念

    在<C语言数据输出大汇总以及轻量进阶>一节中我们举了一个例子,是输出一个 4×4 的整数矩阵,代码如下: #include <stdio.h> #include <std ...

  4. 点击input选中文本

    选文本: $(".unline-ipt").click(function () { $(this).focus().select(); this.selectionStart = ...

  5. Java反序列化漏洞的挖掘、攻击与防御

    一.Java反序列化漏洞的挖掘 1.黑盒流量分析: 在Java反序列化传送的包中,一般有两种传送方式,在TCP报文中,一般二进制流方式传输,在HTTP报文中,则大多以base64传输.因而在流量中有一 ...

  6. ORA-12899: value too large for column

    ORA-12899: value too large for column "SOAU"."SJQY_QTSBSPEC"."PROPERTY_6&qu ...

  7. ios 将p12文件转换为pem

    cd 到 文件所在目录 执行以下命令,生成ck.pem文件. openssl pkcs12 -in ck.p12 -out ck.pem -nodes

  8. 使用jquery-qrcode生成二维码(转载)

    一.使用jquery-qrcode生成二维码 先简单说一下jquery-qrcode,这个开源的三方库(可以从https://github.com/jeromeetienne/jquery-qrcod ...

  9. Python--进阶处理8

    # ====================第八章:类与对象========================= # --------------改变对象的字符串显示------------------ ...

  10. Python目录整合

    一.python基础篇 二.网络编程篇&&并发编程篇 三.数据库篇 -mysql -redis -mongodb 四.前端篇 -html -css -js jquery&&am ...