移动端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 ,就是键盘唤 ...
随机推荐
- 矩池云上TensorBoard/TensorBoardX配置说明
Tensorflow用户使用TensorBoard 矩池云现在为带有Tensorflow的镜像默认开启了6006端口,那么只需要在租用后使用命令启动即可 tensorboard --logdir lo ...
- prometheus虚拟化安装脚本
在线安装下载链接:https://files.cnblogs.com/files/blogs/705493/online_prometheus.sh 离线安装下载链接:https://files.cn ...
- vue学习过程总结(07) - vue的后台服务API封装及跨域问题的解决
以登录流程为例说明接口的封装. 1.登录调用后台的登录api 登录界面的代码 <template> <div class="login-page"> < ...
- C# WinForm 解决子窗体放大后,子窗体图标放大的问题
解决子窗体放大后,子窗体的图标占用主窗体的菜单栏的问题. C#子窗体最大化时, 那个图标跑到主窗体的前面去了, 造成界面不统一也不美观. 所以需要进行处理, 只要有主窗体的菜单ItemAdded事件中 ...
- 【freertos】003-任务基础知识
目录 前言 任务概念 任务状态 任务优先级 空闲任务和空闲任务钩子 空闲任务 空闲任务钩子 创建空闲钩子 创建任务 任务参数相关概念 创建静态内存任务 配置静态内存 实现空闲任务堆栈函数 实现定时器任 ...
- VUE开发--环境配置(一)(转)
无剑_君关注 0.312019.05.09 11:53:43字数 1,073阅读 19,627 https://www.jianshu.com/p/a494417def99?utm_so ...
- Nginx(一) 反向代理为何叫反向代理?
与正向代理比起来,反向代理是什么东西反向了? 正向代理 A同学在大众创业.万众创新的大时代背景下开启他的创业之路,目前他遇到的最大的一个问题就是启动资金,于是他决定去找马云爸爸借钱,可想而知,最后碰一 ...
- NO Oracle database,JUST USE Oracle client。远程导入导出dmp
序言: 你会发现,exp.exe 和imp.exe均存在于Oracle数据库的安装bin目录下.而很多情况下,我们不想安装庞大的Oracle数据库,但想使用imp和exp等工具命令,在我们本地机对Or ...
- Error running 'App': Command line is too long. Shorten command line for App or also for Spring Boot default configuration.
找到标签 <component name="PropertiesComponent">.在标签里加一行 : <property name="dynam ...
- redis支持哪些数据类型?redis命令大全
一.redis支持的数据类型 1)String 常用命令:set/get/decr/incr/mget等: 应用场景:String是最常用的一种数据类型,普通的key/value存储都可以归为此类: ...