null - 程序员宅基地

js手机键盘遮挡_js如何解决软键盘遮挡输入框的问题-程序员宅基地

技术标签： js手机键盘遮挡

本文主要为大家推荐一篇js解决软键盘遮挡输入框的问题分享，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧，希望能帮助到大家。

经验须知

弹出软键盘时：

ios端$(‘body').scrollTop()会改变

android端$(window).height()会改变

拉起键盘不是一瞬间，而是有一个缓动过程

问题重现

ios端，经常会出现输入法遮挡输入框的问题(特别是那种有一个白色顶部的输入法，如：百度输入法)，如图：

问题解决

我们只需要在输入框聚焦之后，开启一个定时器，执行$(‘body').scrollTop(1000000)，这样由于整个body滚动到了最下面，输入框自然就看见了，具体请查看以下示例

示例源码

demo

* {

margin: 0;

padding: 0;

}

body, html {

width: 100%;

height: 100%;

}

.bottom {

position: absolute;

left: 0;

bottom: 0;

width: 100%;

font-size: 0;

}

input {

font-size: 14px;

box-sizing: border-box;

width: 50%;

height: 50px;

line-height: 50px;

}

$(function() {

// 解决输入法遮挡

var timer = null;

$('.bInput').on('focus', function() {

clearInterval(timer);

var index = 0;

timer = setInterval(function() {

if(index>5) {

$('body').scrollTop(1000000);

clearInterval(timer);

}

index++;

}, 50)

})

});

智能推荐

vue 前端表格导入与导出_vue fixdata-程序员宅基地

文章浏览阅读557次。excel导入到表格表格导入与导出，文末带Blob.js和Export2Excel.js导入按钮<input type="file" @change="import(this)" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"/>导入方法import(obj) { _vue fixdata

Error: protect(): protection stack overflow [防护堆叠上溢] 解决方案①_r studio中保护堆栈溢出-程序员宅基地

文章浏览阅读6.4k次。在执行R代码是遇到防护堆叠上溢的error，有效方案①1、命令行到Rgui.exe的地址(cmd)2、输入Rgui.exe --max-ppsize=5000003、在打开的R中输入options("expressions"=20000)memory.limit(size=8000000)https://www.researchgate.net/post/error_protect_protection_stack_overflow_in_R..._r studio中保护堆栈溢出

ORA-01092、ORA-00704、ORA-39700 错误的处理方法_ora-01092: oracle instance terminated. disconnecti-程序员宅基地

文章浏览阅读7.6k次。场景：通过rman做一个数据库的异机恢复，进行到最关键的一步，打开数据库的时候报了错误，详细如下SQL> startup mount;Oracle 例程已经启动。Total System Global Area 6797832192 bytesFixed Size 2241264 bytesVariable Size 3523218704 bytesDatabase Buffers 3254..._ora-01092: oracle instance terminated. disconnection forced ora-00704: boots

java 判断ftp文件是否存在_java如何检验ftp服务器中指定文件是否存在-程序员宅基地

文章浏览阅读202次。项目工作中，需要检验ftp服务器中指定文件是否存在，在网上查阅了相关资料，可以通过ftpClient类进行实现。免费学习视频教程分享：java课程具体实现代码：import org.apache.commons.net.ftp.FTP;import org.apache.commons.net.ftp.FTPClient;import org.apache.commons.net.ftp.FTPR..._java判断ftp file是否存在

学习图形着色器-理论与实践 graphic shaders - glman_图形着色器理论与实践pdf-程序员宅基地

文章浏览阅读2.7k次。http://web.engr.oregonstate.edu/~mjb/glman/_图形着色器理论与实践pdf

安装svn(Setup-Subversion-1.7.7)认证失败的解决办法，附加注册服务_svn安装no certification authorities found-程序员宅基地

文章浏览阅读4.9k次。服务器安装Setup-Subversion-1.7.7 安装路径：D:\Subversion在D:\根目录新建SVN目录做为svn的版本库目录。接着，在D:\SVN\目录下新建一个项目bobo目录。然后，在该目录上右键，选择：TortoiseSVN -> 在此创建版本库，点击“确定”（注意：不要创建目录结构－理由：由于本人对SVN不了解，经过测试，如果创建了目录结构，那么同步到客户端的项目_svn安装no certification authorities found

随便推点

ubuntu上opencv源码编译_libjasper-dev源码-程序员宅基地

文章浏览阅读301次。安装必备包sudo apt-get install build-essential cmake libjpeg-dev libtiff5-dev libjasper-dev安装gtkfor opencv3.2 and above:sudo apt-get install libgtk-3-devfor opencv2.4.x:sudo apt-get install libgtk2.0-dev安装v4l2sudo apt-get install v4l2ucp v4l-ut._libjasper-dev源码

安卓设备连接Unity Profiler进行性能分析_unity profile 手机-程序员宅基地

文章浏览阅读4.6k次，点赞2次，收藏7次。内容会持续更新，有错误的地方欢迎指正，谢谢!方式一：手机上运行游戏，以ADB方式连UnityProfiler分析游戏性能1.安卓环境：jdk、sdk：cmd（Win+R打开界面并输入cmd）里直接输入 java 能正常输出即可 https://www.jianshu.com/p/21babde25dd5 adb：cmd 里直接输入 adb 能正常输出即可 https://www..._unity profile 手机

学习一下windows系统的的目录结构，对比一下Linux系统的目录结构_windows内置linux目录结构-程序员宅基地

文章浏览阅读3.6k次，点赞6次，收藏30次。_windows内置linux目录结构

海思3559AV100实现8k文件编码_rk_mpi_cal_comm_getpicbuffersize-程序员宅基地

文章浏览阅读913次，点赞13次，收藏27次。有些小改动需要在common中改，都很简单就不写了，看一下就知道，另外我这边只测试了8k的一帧编码，如需连续编码视频需要再扩展一下，我这边由于公司项目安排就没再继续做了，测试出来8k文件编码的结果如下，颜色偏差是因为我的YUV和板子支持的YUV的存储顺序不一致，这里时间关系也就不调了，也算是顺利实现了芯片的8k文件编码。第二个函数是SAMPLE_VENC_CheckSensor，应该是检查镜头的分辨率支不支持要编的尺寸，这里我们先试的4k，所以也可以不管这个。_rk_mpi_cal_comm_getpicbuffersize

Android BLE 蓝牙通信库，2024年最新应届生面试销售岗位的面试问题技巧_android蓝牙通信-程序员宅基地

文章浏览阅读919次，点赞12次，收藏10次。然后根据自定义的协议，解析对应的 BeaconItem 中的 bytes，首先创建一个 BeaconParser，传入对应的 BeaconItem，然后根据协议不断读取数据，如果协议中某个字段占 1 个字节，则调用 readByte，若占用两个字节则调用 readShort，如果要取某个字节的某个 bit 则调用 getBit。// 获取第 1 字节的第 1bit。可以在广播中携带设备的自定义数据，用于设备识别，数据广播，事件通知等，这样手机端无需连接设备就可以获取设备推送的数据。_android蓝牙通信

vue el-input表单验证禁止输入空格_element表单空格校验-程序员宅基地

文章浏览阅读1w次，点赞6次，收藏7次。element ui 中自带的表单必填项校验输入空格时，依然能逃过验证（required: true还是可以通过），需要再在v-model 加上.trim来禁止输入空格字符。加上之后则不能输入空格。..._element表单空格校验