移动端input输入框把页面顶起, 收起键盘页面复原不了问题
我相信大家平时也会遇到这种问题, 移动端 input 或者 textarea获取光标, 整个页面被顶起来, 键盘收起, 页面不复原的问题
====>>>>
我这边提供两种解决方案:
1. 针对 vue.js
html:
<input v-model="workWhere" @blur="changBlur"> js:
methods: {
changBlur(){
window.scroll(0,0);//失焦后强制让页面归位
},
}
2.针对原生 或者 JQ
<div class="box">
<input placeholder="请选择">
</div> $(".box input").on("blur",function(){
window.scroll(0,0);//失焦后强制让页面归位
});
移动端input输入框把页面顶起, 收起键盘页面复原不了问题的更多相关文章
- 移动端input“输入框”常见问题及解决方法
转自 https://www.cnblogs.com/ljx20180807/p/9837748.html 1. ios中,输入框获得焦点时,页面输入框被遮盖,定位的元素位置错乱: 当页input存在 ...
- 点击底部input输入框,弹出的软键盘挡住input(苹果手机使用第三方输入法 )
测试移动端页面的时候,偶然发现点击底部input输入框时,弹出的虚拟键盘偶尔会挡住input输入框. 输入框固定在页面底部,如图所示: input固定底部设计图.png 点击底部input输入框唤 ...
- IOS系统input输入框为readonly时, 隐藏键盘上的上下箭头
业务中在一定场景中会将input 设置为只读状态,在IOS safari上当input 输入框focus 时,仍会出现键盘上的上下箭头,这种用户体验非常不好,如何干掉呢? <input read ...
- 移动端页面中点击input输入框的时候弹出的键盘将输入框挡住的问题
使用的是vux框架, 以为是框架问题, 后来发现是把当前页面的高度写死为了height:200%: 只要把高度去掉就能让页面自动弹到输入框的上方:
- 移动端 input 输入框实现自带键盘“搜索“功能并修改X
主要利用html5的,input[type=search]属性来实现,此时input和type=text外观和功能没啥区别: html代码入下: <form action="" ...
- input输入框直接拉起九宫格数字键盘
<input type="number" pattern="\d*">
- iOS中 H5的input输入框focus()无法自动拉起键盘(解决方法)
ios的hybird APP 无法使用focus()获取焦点和键盘的问题. 解决方案 原来,在App的配置文件(config.xml),里面默认会有一句 1 <preference name=& ...
- React Native登录注册页面实现空白处收起键盘
其实很简单,直接使用ScrollView作为父视图即可.有木有很神奇啊,以前都还不知道呢.....
- 苹果系统 IOS 12 的H5 BUG :键盘把页面顶上去了,底下留有一块空白区域
苹果以往的系统是没问题的,一般情况下,点击input唤起键盘后是会自动显示到输入框的地方,然后收起键盘页面就会恢复到底部. 但是如果苹果是已经更新到最新的IOS12的话就会发生一个BUG ,就是键盘唤 ...
随机推荐
- Elasticsearch-CentOS7单机安装测试
排版比较丑,但按照此步骤执行一定会搭建成功. 一.环境描述及准备 1.下载Elasticsearch包 curl -L -O https://artifacts.elastic.co/download ...
- 浅浅的聊一下 WebSocket
第一次看到 ws:// 和 wss:// 时候,感觉好高级啊,还有这种协议. Websocket 历史 WebSocket是在2008年6月诞生的1.经由IEFT标准化后,2009年chrome 4第 ...
- netty系列之:netty中各不同种类的channel详解
目录 简介 ServerChannel和它的类型 Epoll和Kqueue AbstractServerChannel ServerSocketChannel ServerDomainSocketCh ...
- linux下编译安装php5.6出现 configure: error: Cannot find MySQL header files under /usr/local/mysql.
#yum install gcc gcc-c++ libxml2 libxml2-devel libjpeg-devel libpng-devel freetype-devel openssl-dev ...
- git命令新建远程分支并推送,切换远程地址
最近记性不好,老是忘记操作命令,记录下一下新建远程分支和切换.删除远程地址的命令: 1.查看当前分支: git branch 2.查看所有分支:git branch -a 3.切换分支:git ch ...
- K8S原来如此简单(三)Pod+Deployment
上篇我们已经安装好k8s1.23集群,现在我们开始使用k8s部署我们的项目 Pod Pod 是一组容器集合,是可以在 Kubernetes 中创建和管理的.最小的可部署的计算单元.这些容器共享存储.网 ...
- JavaWeb——Tomcat使用
官方下载地址:https://tomcat.apache.org/download-90.cgi 选择安装包: 64-bit Windows zip (pgp, sha512) 注:tar.gz后缀的 ...
- Mybatis结果集ResultMap映射
基本使用: 解决属性名和数据库字段名不一致的问题 <resultMap id="user" type="com.guan.bean.UserBean"&g ...
- Struts2搭建及利用OGNL表达式弹出计算器
0x01 环境搭建 1.创建Struts2应用 创建一个动态网站项目 2.配置Tomcat启动环境 3.在WebContent目录下的WEB-INF文件夹中创建web.xml,Tomcat启动时会加载 ...
- 有限差分法(Finite Difference Method)解方程:边界和内部结点的控制方程
FDM解常微分方程 问题描述 \[\frac{d^2\phi}{dx^2}=S_{\phi} \tag{1} \] 这是二阶常微分方程(second-order Ordinary Differenti ...