移动端点击文本框 键盘弹出解决访问

当我们做h5的时候,经常会遇到键盘弹出遮挡文本框的情况，这里区分IOS和安卓,

在IOS中，IOS会在键盘弹出后自动将文本框上移，避免文本框被键盘挡住，但是在收起键盘的时候 在vue中会导致页面的卡死,这个时候我们可以用

document.body.scrollIntoView(false) 来手动让页面重新渲染，因为IOS收起键盘后，会触发当事文本框的blur事件，所以我们可以给文本框添加该事件。

在安卓中，通常会出现键盘把文本框遮挡住的情况，我们可以监听文本框的focus事件，当文本框focus事件触发时：将文本框移动至界面上方一半的位置，同时因为在安卓中收起键盘 blur不会被触发，但是会触发resize事件，所以我们需要在resize事件中判断是否是收起键盘的操作，如果是 则将当事文本框移动到原来的位置，在这里 如果仅仅是移动文本框的位置，可能会导致界面难看，最好的方案是将整个界面上移，所以我们不妨移动整个body上移，然后在收起键盘的时候 将Body复原。

原文地址：https://www.cnblogs.com/mrzhu/p/11482162.html

时间： 2024-10-25 11:49:55

移动端点击文本框 键盘弹出解决访问的相关文章

IPhone手机页面中点击文本输入框，弹出键盘，网页会放大,如何解决

在head标签中加入以上meta声明.具体属性可以谷歌/百度. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 我查了下viewport,有几个属性:width - viewport的宽度 height - viewport的高度initial-scale - 初始的缩放比例minim

处理UIScrollView中的编辑框被弹出键盘遮挡的问题

当UIScrollView中的某一行存在编辑框时,点击编辑框,弹出的键盘有可能遮挡住编辑框,造成体验效果很不好.解决的方法很简单,就是将UIScrollView的内容和UIScrollView容器的内边距(准确来说是底边距)增加正好是键盘高度的距离,ios系统会将选中的行重新定位,位置正好是距离窗口底边相同距离的地方,当然,键盘缩回去的时候注意要把内边距再设置回来.涉及到的最主要的函数就是UIScrollView的setContentInset函数. 首先,要在程序开始的地方注册键盘弹出和缩回的

键盘的出现于隐藏（解决键盘弹出时会覆盖文本框的问题，代码实现）

#import "ViewController.h" #import "UIView+FrameExtension.h" // 可以自己写,以后用着方便 #define kDeviceHeight [UIScreen mainScreen].bounds.size.height @interface ViewController () @end @implementation ViewController - (void)viewDidLoad { [super v

点击文本框弹出可供选择的checkbox复选框代码实例

点击文本框弹出可供选择的checkbox复选框代码实例:本章节分享一段代码实例,它能够点击文本框的时候,能够弹出下拉的checkbox复选框,选中复选框就能够将值写入文本框中,可能在实际应用中的效果没有这么直白简单,不过可以作为一个例子演示,以便于学习者理解和扩展.代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author&qu

原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间

原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org

[Cordova/Phonegap] Cordova iOS 应用在第三方输入法的键盘弹出（点击输入框）时，页面不上移，导致输入框被键盘遮挡 的解决办法

http://blog.csdn.net/lovelyelfpop/article/details/52033045 Cordova iOS应用在使用系统自带输入法键盘的时候,聚焦文本框是会将整体webview界面上移的,如下图: 然而,如果你用的是第三方输入法(百度.搜狗.qq输入法等都是),聚焦文本框弹出键盘时,界面却不会整体上移,导致文本框被软键盘遮挡,如下图: 不仅被遮挡,靠底部的文本框还无法往上拖拽滚至可视区域. 解决办法一:第三方键盘弹出,实现界面也能上移 使用 ionic-plug

弹出输入文本框上弹的动画效果

先看以下简单的模型图片效果,有图才有真相: 软键盘弹出效果: 终极效果实现: 效果呢就是这样: 简单解释一下:由于显示页面要承载很多的信息内容,所以在让用户发布动态的时候,要求从页面的底部以动画的方式向上抽出.当弹出软键盘输入法的时候,要避免输入框被全部遮挡或者部分遮挡.则,软键盘要把输入文本框顶起来,完全的托起来. 那么,就要完成这几步骤: 1,在该页面的类中(Actiivty或者fragment),在加载该布局之前添加这句话,其作用是使文本框根据软键盘弹出自动调节位置和大小: getWind

C# GridView Edit &amp; Delete, 点击Delete的时候弹出确认框

1. 使用GridView自带属性ShowEditButton和ShowDeleteButton,均设为True  <Columns> ... <asp:CommandField ShowEditButton="True" ShowDeleteButton="True"></asp:CommandField> </Columns> 则在GridView指定列的位置会显示Edit和Delete的LinkButton 2.

ios Simulator运行中 ,点击文本框不能自动弹出keyboards的问题

运行新做的计算器App的时候有个小问题,点击文本框不能在模拟器下方自动弹出来键盘,只能通过电脑的键盘输入数字 解决方法如下: 打开模拟器,在最上面的菜单栏中,选择hardware,然后选择keyboards,有三个选项, 依次都勾选就行了.(注意:第三个选项在点击之后,实际已勾上了,但显示未勾上,但实际已经奏效了,这可能是xcode6的一个显示上的bug)