精华内容
下载资源
问答
  • 编译了Graphics例子,放到自己手机上,运行以后不动,当自动锁键盘开始锁住手机后移动的小球速度缓慢了,希望知道原因。 另外,Graphics例子中start(1,1,.....)中1代表1微秒,手机的cpu能响应那么快吗?怎么...
    编译了Graphics例子,放到自己手机上,运行以后不动,当自动锁键盘开始锁住手机后移动的小球速度变缓慢了,希望知道原因。
    另外,Graphics例子中start(1,1,.....)中1代表1微秒,手机的cpu能响应那么快吗?怎么会这么写呢?
    展开全文
  • 键盘挡住输入框解决办法

    千次阅读 2019-07-19 15:39:34
     为什么要随时监测屏幕大小,这是因为我们在手机端的时候,常常遇到这样的问题:当点击输入框的时候,手机键盘自动浮现,它使得页面的可视示高度(document.body.clientHeight)发生变化。而我们的输入框...

    为什么?  

      为什么要随时监测屏幕大小,这是因为我们在手机端的时候,常常会遇到这样的问题:当点击输入框的时候,手机的键盘就会自动浮现,它会使得页面的可视示高度(document.body.clientHeight)发生变化。而我们的输入框就被可怜的遮挡在小键盘后面

    怎么办?

    方法1

      我们不知道小键盘何时会出现,但有一点是可以确定的,当小键盘出现的时候,body的可视区域一定为发生变化!!当我们检测到页面的可视高度发生了变化,我们就可以确定手机的键盘出来了。于是我们就可以使用document.getElementById('×××××').scrollIntoView();把被小键盘遮挡住的输入框给上移到可视区域。

    Ps:结合scrollIntoView()使用的还有activeElement当我们页面有多个input输入框时,我们可以使用HTML5的辅助管理DOM功能,document.activeElement属性始终会引用DOM当前获得的焦点元素。可以获得当前用户焦点的元素。

    1

    document.activeElement.scrollIntoView();

    监测手机小键盘弹出代码:

    1

    2

    3

    4

    5

    6

    7

    window.onresize = () => {

        // 注意,return返回的函数为立即执行函数!!

        return (() => {

            window.screenHeight = document.body.clientHeight;

            this.showHeight = window.screenHeight;

        })()

    }

    当我拿到showHeight,在vue里,我就可以通过watch他的变化,然后再执行相应的逻辑代码,使用Vue.js完整代码如下:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    36

    37

    38

    data() {

        return {

            // 默认屏幕高度

            docmHeight: document.documentElement.clientHeight,

            showHeight: document.documentElement.clientHeight,

        }

    // 渲染后执行

    mounted() {

        window.onresize = () => {

            return (() => {

                window.screenHeight = document.body.clientHeight;

                this.showHeight = window.screenHeight;

            })()

        }

    },

    watch: {

        showHeight: 'inputType',

    },

    methods: {

        // 检测屏幕高度变化

        inputType() {

             if (!this.timer) {

                 this.timer = true

                 let that = this

                 setTimeout(() => {

                     if (that.docmHeight > that.showHeight) {

                         that.inputfile = false;

                         if (document.activeElement.className === 'weui-textarea') {

                             document.getElementById('applyNote').scrollIntoView(); // 输入框的id为applyNote,class为weui-textarea

                         }

                     else if (that.docmHeight <= that.showHeight) {

                         that.inputfile = true;

                     }

                     that.timer = false;

                 }, 20)

            }

        }

    }

    方法2

    设置相对定位,通过top来使输入框到达合适的位置

    1.js拿不到键盘的弹出和收起事件;

    2.覆盖一层的键盘弹出方式不会触发window.resize事件和onscroll事件。

     getElementOffsetTop(el) {
        let top = el.offsetTop
        let cur = el.offsetParent
        while(cur != null){
              top += cur.offsetTop
              cur = cur.offsetParent
       }
       return top
      }
    
      componentDidMount() {
        const u = navigator.userAgent
        const isAndroid=u.indexOf('Android')>-1||u.indexOf('Linux')>-1;//android终端
        // alert('android'+isAndroid)
        if(isAndroid){ // android统一处理,不影响ios的自身处理
          const body = document.getElementsByTagName('body')[0] // 兼容获取body
    
          const regDom = document.querySelector('.wrapper_register') // 获取页面根元素
          const content = document.querySelector('.content') // 表单内容部分
    
          // const scrollHeight = body.scrollHeight // 网页文档高
          // const scrollTop = body.scrollTop// 卷上去的高
    
          const clientHeight = body.clientHeight //可见高
          const fixHeight = clientHeight/3 // 定位高,弹出键盘时input距浏览器上部的距离,自己定义合适的
    
          // 符合需弹出键盘的元素query
          const queryStr = 'input[type="text"], input[type="tel"], input[type="password"], textarea'
          const inputs = content.querySelectorAll(queryStr)
    
          // console.log(inputs)
    
          const offsetTopArr = Array.prototype.map.call(inputs,item=>{
            return this.getElementOffsetTop(item) // offsetTop只能获取到顶部距它的offsetParent的距离,需此方法获取到元素距顶部的距离
          })
    
          inputs.forEach((item, i)=>{
            item.addEventListener('focus',()=>{
              // 改变top上移页面
              regDom.style.top = '-' + (offsetTopArr[i] - fixHeight) + 'px'
            })
    
            item.addEventListener('blur',()=>{
              // 恢复top
              regDom.style.top = 0
            })
          })
        }
      }

    效果基本实现,这里还有两个问题:

    第一,如果下面的提交按钮是fixed,有些手机键盘弹出时会把按钮顶上来,如果上述代码中fixHeight设置不合适,会导致这个按钮遮挡输入框。所以为了统一效果,将底部按钮取消fixed,随页面滚动。

    第二,如果点击键盘上的收起键盘按钮,会导致页面top无法恢复,因为没有触发输入框失焦方法,需点击空白处恢复。(目前没找到解决办法)

    展开全文
  • 手机 pdf 阅读器

    2009-02-12 23:00:29
    键盘映射选择其它时,用户可以自己更改按键的值,对于全键盘的机器来说,用户定义更灵活。 修改浏览图片时方向键控制图片位置的策略 修正在A780上无法二次设置背景图的bug 修正umd格式的文件在历史中显示图标...
  • 入门学习Linux常用必60个命令实例详解doc/txt

    千次下载 热门讨论 2011-06-09 00:08:45
    文件doc版,可自行转成txt,在手机上看挺好的。 本资源来自网络,如有纰漏还请告知,如觉得还不错,请留言告知后来人,谢谢!!!!! 入门学习Linux常用必60个命令实例详解 Linux必学的60个命令 Linux提供...
  • 1.1.1 为什么人们如此沉迷于开发视频游戏 1.1.2 视频游戏的类型 1.2 学习游戏设计的要素 1.2.1 提出基本思想 1.2.2 整理剧情 1.2.3 可视化图形 1.2.4 为游戏选择正确的声音 1.2.5 使用控制器控制游戏 ...
  • 《Google Android SDK开发范例大全(第3版)》在上一版的基础上,以Android手机应用程序开发(采用Android SDK 2.3.3)主题,超过200多个范例全面且深度地整合了手机、网络及服务等多个开发领域,读者提高程序设计...
  • 《Google Android SDK开发范例大全(第3版)》在上一版的基础上,以Android手机应用程序开发(采用Android SDK 2.3.3)主题,超过200多个范例全面且深度地整合了手机、网络及服务等多个开发领域,读者提高程序设计...
  •  《google android sdk开发范例大全(第3版)》在上一版的基础上,以android手机应用程序开发(采用android sdk 2.3.3)主题,超过200多个范例全面且深度地整合了手机、网络及服务等多个开发领域,读者提高程序设计...
  • 这个允许设备知道什么是从输入设备(键盘)来的需要。并且如何的响应这些命令(比如,打开电视机)。这个是一个简单的嵌入式设备的编程。总之,不管你相不相信,像这样的简单设备绝对的和早期的手机和开发有着紧密的...
  • 060《Tabagotchi》减缓全球暖做出贡献 059《PageSpeed Insight and CheckList》网页优化提供建议和量化指标 058《IP-Address》快速查看当前设备IP 057《图片另存JPG/PNG/WebP》让WebP图片下载PNG...
  • SECURITY OPTION(检测密码方式)如设定SETUP,则每次打开机器时屏幕均提示输入口令(普通用户口令或超级用户口令,普通用户无权修改BIOS设置),不知道口令则无法使用机器;如设定SYSTEM则只有在用户想进入BIOS设置...
  • Android应用开发揭秘--详细书签版

    热门讨论 2012-12-12 13:27:46
    然而,以android和iphone手机为代表的智能移动设备的发明却敲响了pc时代的丧钟!移动互联网时代(3g时代 )已经来临,谁成为这些移动设备上的主宰?毫无疑问,它就是android——pc时代的windows!  移动互联网...
  • C#微软培训教材(高清PDF)

    千次下载 热门讨论 2009-07-30 08:51:17
    5.1 量 .44 5.2 常 量 .46 5.3 结 .47 第六章 类 型 转 换 .48 6.1 隐式类型转换 .48 6.2 显式类型转换 .53 6.3 结 .56 第七章 表 达 式 .58 7.1 操 作 符 .58 7.2 算术操作符和算术...
  • 为了返回新的对象(数组),不得不有上面奇怪的样子,而在使用更深的数据结构时会变的更棘手。 让我们看看Immutable的做法: // reducer ... return oldArr.set(4, newValue); 是不是很简洁? 关于 “===”: 我们...
  • C#微软培训资料

    2014-01-22 14:10:17
    5.1 量 .44 5.2 常 量 .46 5.3 结 .47 第六章 类 型 转 换 .48 6.1 隐式类型转换 .48 6.2 显式类型转换 .53 6.3 结 .56 第七章 表 达 式 .58 7.1 操 作 符 .58 7.2 算术操作符和算术...
  • 如果使用的电源功率偏或没有连接辅助电源接口时,就出现主机虽然能够加电,但因为提供给CPU的供电电流不足,造成CPU不能完成初始化而表现主机没有自举启动过程。 12.硬盘,光驱,软驱性能部分损坏,造成电源...
  • iPhone开发秘籍(第2版)--源代码

    热门讨论 2012-12-11 13:51:22
    2.15.6 临时发布添加图片 65 2.16 定制Xcode标识 66 2.17 创建自定义Xcode模板 66 2.17.1 覆盖com.yourcompany 67 2.17.2 构建其他模板 67 2.18 并排查看代码 68 2.19 结 69 第3章 Objective-C训练营 70 ...
  • 现在我们在这个领域里做得越多,人们就会在这个领域投入更多的钱,从而使得将来构建更强大的移动应用程序会变得更容易。Android还很新(基于Android的设备在2008年底才刚刚出现在市场上),但相信在兼具深度和广度...
  • 支持数字小键盘,可选是弹出全键盘的数字面板还是小键盘。 多版面字符页面,可以自行拓展各种字符展示,可用于多语言输入。 支持Qt程序嵌入的浏览器中的网页中的文本框等控件的输入。 界面大小随意设置,采用布局自...
  • 阅读工具 开卷有益

    2012-03-31 14:07:03
    经楼主亲身检测 改程序完美支持酷派f800及windows CE 系统手机 1、开卷操作快速入门: 小说阅读界面: 1、点屏幕上下部分: 前后翻页 2、长按屏幕上下部分:连续翻页 3、水平左右横向滑动:前后翻页、阅读导航(CHM)...
  • 设定字符串“张三,你好,我是李四” 产生张三的密钥对(keyPairZhang) 张三生成公钥(publicKeyZhang)并发送给李四,这里发送的是公钥的数组字节 通过网络或磁盘等方式,把公钥编码传送给李四,李四接收到张三编码后...
  • JAVA上百实例源码以及开源项目

    千次下载 热门讨论 2016-01-03 17:37:40
     Java数据压缩与传输实例,可以学习一下实例化套按字、得到文件输入流、压缩输入流、文件输出流、实例化缓冲区、写入数据到文件、关闭输入流、关闭套接字关闭输出流、输出错误信息等Java编程技巧。 Java数组倒置...
  • C#编程经验技巧宝典

    热门讨论 2008-06-01 08:59:33
    85 <br>0130 复制字符串中指定的字符 85 <br>0131 巧截字符串的数字 86 <br>0132 如何存储长字符串 86 <br>0133 在进行字符串比较时忽略大写 87 <br>0134 如何去除字符串尾空格 87 ...
  • front-end-Doc ...Webpack 和 React 书 - 前端乱炖 http://www.html-js.com/article/Fakefish%203053 Webpack 和 React 书 - gitbook https://fakefish.github.io/react-webpack-cookbook webpack ...

空空如也

空空如也

1 2
收藏数 25
精华内容 10
关键字:

为什么手机键盘会变小