原生js解决ios手机input输入框弹出覆盖问题

最新推荐文章于 2023-11-10 16:21:25 发布
最新推荐文章于 2023-11-10 16:21:25 发布
阅读量728 收藏
点赞数
分类专栏： 移动端兼容性
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43956521/article/details/116933673
版权
针对iOS手机input输入框在软键盘弹出时被遮挡及页面布局混乱的问题，解决思路包括避免在父级使用overflow: hidden，确保键盘弹起时页面仍可滚动，以防止界面布局混乱。提出一种原生js的解决方法。
摘要由CSDN通过智能技术生成

背景：

  • 软键盘弹起挡住input框
  • 软键盘弹起页面布局乱掉
  • 安卓手机 + 界面父级组件使用了overflow: hidden 导致键盘弹出（页面本质上变小了）仍然不可滚动
    解决思路：
    父级别不要使用overlow:hidden 或者 键盘弹起的时候去掉overflow: hidden.
    总之要确保键盘弹起的时候页面仍然可以拖动。 不然界面很容易乱
    实现原生js方法
(function() {
   
  window.addEventListener("resize", function() {
   
    if
最低0.47元/天 解锁文章
累了你就写会代码吧
关注
专栏目录
ios 键盘弹出input输入框被遮挡 键盘隐藏时页面无法回弹解决方案
陈万洲的专栏
08-18 3958
ios 键盘弹出input输入框被遮挡 键盘隐藏时页面无法回弹解决方案 问题：测试发现ios微信端浏览器中，键盘弹出后，输入框被软键盘遮挡，input失焦后，因软键盘顶起的页面没有回弹到原来位置，需手动滑动一下页面才可以恢复；android端没有发现这个问题 原因：ios对fixed支持并不是很好，ios12+，微信6.7.4版本存在bug,键盘收回时,界面没有恢复,底下出现空白区域,并导致光标...
JS-IOS输入法遮挡输入框解决办法
孤舟行客
07-13 1108
var focus = 0; var top = 0; $("#txt").on("focus",function () { //ios第一次弹出输入法遮住输入框解决方法 setTimeout(function(){ document.querySelector("#msg-input").scrollIntoView(true
ios 自定义弹出输入框（支持自动添加分隔符，字数限制等功能）
xiaozhaoqiang的博客
02-06 3798
非常感谢大家利用自己宝贵的时间来阅读我的文章 ,  今天给大家带来的是一个自定义的弹出输入框，支持自定义标题、各控件颜色、自动添加分隔符、字数限制等功能。并添加了pods导入支持，如果需要的话希望能帮到你 , 当然, 有任何不妥的地方 欢迎指正。喜欢的可以关注一下我的简书、我的博客 先上效果图 1、普通状态 2、自动添加分隔符、字数限制 集成
点击底部input输入框，弹出的软键盘挡住input（苹果手机使用第三方输入法 ）
whyrookie的博客
11-06 649
测试移动端页面的时候，偶然发现点击底部input输入框时，弹出的虚拟键盘偶尔会挡住input输入框。 输入框固定在页面底部，如图所示： input固定底部设计图.png 点击底部input输入框唤起软键盘时，软键盘挡住输入框。如图所示： 点击input键盘挡住图.png 测试过多台真机发现安卓的手机都不会出现这个问题，个别的iOS手机有问题。而且同一型号的苹果有的有问题有的没有问题。经过多方的归纳、总结惊奇的发现：会出现这个bug的苹果手机，使用的都是苹果第三...
ios点击input输入框，键盘弹出，此时滑动页面，光标位移
weixin_30528371的博客
06-20 1497
$(_pageId+" section").scroll(function(){ if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)){ $(document.activeElement).blur(); } }); 转载于:https://www.cnblogs.com/colorsed/p/7054709.html...
IOS简单实现输入框随着键盘的弹出动态上升(很简单的)
FIZZ_CHIANG的专栏
09-15 2267
- (BOOL)textFieldShouldBeginEditing:(UITextField *)textField {     [UIView animateWithDuration:0.25 animations:^{         CGRect frame = self.frame;         frame.origin.y = - 40;         self.fr
ios-弹出可输入提示框.zip
07-11
弹出可输入提示框，输入内容通过block返回
UE4 IOS 原生输入框弹出框打开以及Crash
weixin_44432242的博客
08-20 782
UE4 IOS 原生输入框弹出框问题如果打开IOS原生弹出框UE4.26.2，我的项目中未勾选了这个选项会出现了弹出框并且如果弹出框中如果原本有内容，点击之后会出现Crash 如果打开IOS原生弹出框 不勾选这个选项就会自动弹出IOS原生弹框，优点是可以进行复制粘贴之类的 UE4.26.2，我的项目中未勾选了这个选项会出现了弹出框并且如果弹出框中如果原本有内容，点击之后会出现Crash 解决方案：参考Unreal 论坛中发现了类似的解决方案以及方法，在Mac上通过修改源码引擎来解决，具体修改如下: \E
js与jquery实时监听输入框值的oninput与onpropertychange方法
12-12
本文实例讲述了js与jquery实时监听输入框值的oninput与onpropertychange方法。分享给大家供大家参考。具体如下： 最近做过一个项目，需求是下拉框里自动匹配关键字，具体细节是实时监听文本框 value 值的变化，然后...
解决Vue 移动端在iOS中点击多次输入框才能聚焦的问题
迪丽热bug的博客
12-05 1186
解决Vue 移动端在iOS中点击输入框无法聚焦问题 在移动端开发过程中，都是通过控制台去改变屏幕大小调试页面，基本上不会去考虑唤起键盘的问题，在ios端唤起键盘会有一定时间的延迟，点击输入框不能聚焦，或者点击多次才能聚焦的问题，解决方法如下 引入 npm fastclick 插件 打开cmd cd到项目里. npm install fastclick -S 在main.js中全局引入 // 引入 fastclick 并重写其 focus 方法 import FastClick from 'fastclic
ios-自定义弹出视图输入框.zip
07-11
自定义输入提示框
ios微信小程序中 input 输入框问题，输入的光标中的内容自动清空
FE-阿阳的博客
12-18 6601
ios微信小程序中 input 输入框问题，输入的光标中的内容自动清空 问题描述 1.我在页面上有个倒计时的功能，每一秒都在更新时间，更新时间显示的值（view一直变） 2.我调用input输入框，准备输入内容，每次倒计时秒数变得时候，光标的内容自动全部清空 具体场景描述请见下图： 解决方案 这个问题是 mpvue 处理定时器和 input 输入框在ios上的兼容问题；问题连接附上： git...
【UE4】IOS 文本输入框弹出设置
weixin_54051713的博客
06-07 945
未勾选时，在 IOS 点击一个文本输入框，会弹出对应 IOS 原生的文本输入框。 UE4 4.26 在该文本输入框操作时，会造成工程闪退，原因暂时未找到。
Swift 实现 iOS 类似微信输入框跟随键盘弹出的效果
magic_castle的专栏
12-30 745
封面（图文无关) 为什么要做这个效果 在聊天app，例如微信中，你会注意到一个效果，就是在你点击输入框时输入框会跟随键盘一起向上弹出，当你点击其他地方时，输入框又会跟随键盘一起向下收回，二者完全无缝连接，那么这是怎么实现的呢，也许你会说直接在键盘弹出的时候把输入框也向上移动不就行了？但是我使用这种方法的时候，发现效果十分不理想，会有明显的滞后现象，原因有以下几点: 1.键盘弹
ios 三种系统弹框的封装（UIAlertController，UIActionSheet，输入框）
Z1591090的博客
03-08 5378
一句代码搞定三种弹框（面向协议的编程） 第一步：代码的架构看图（定义一个OutgoingServer,）我们只需要调用这个， 第二步： 从OutgoingServer获得弹框 + (id<ActionSheetAlertInterfaces>)actionSheetWithTitle:(NSString *)title ...
iOS 自定义文本输入框弹框视图（例子：【调整价格、调整库存】）
热门推荐
iOS逆向与安全
06-02 1万+
前言 在商品模块的商品详情界面，经常需要修改一些字段，比如价格库存，这个时候经常利用到弹框。 效果如下： I、 使用方法 1.1 构建视图模型 - (ERPPopupUITextFieldModel*)PopupUITextFieldModel4adjustStocks{ if(nil == _PopupUITextFieldModel4adjustStocks){ _PopupUITextFieldModel4adjustStoc
ios 对话框 弹框，输入对话框 普通对话框
最新发布
代码是贝多芬的音符
11-10 1148
ios 对话框 弹框 输入框
iOS简单的键盘弹出输入框上移
QiLong_Shi的博客
11-25 879
之前项目中遇到键盘弹出遮挡输入框时, 都是使用三方库DaiDodgeKeyboard进行界面上移动画, 这个三方库很方便, 但是有时候会出现一些莫名的Bug, 所以自己动手实现了一个简单的效果，基本实现了键盘弹出的动画效果, 可能还要具体需求具体分析, 不过一般场景已经够用, 1.添加测试UITextfield,添加一下键盘的通知, 并记得移除 // 添加 - (void)viewDidLo
iOS系统键盘上的输入框简单实现
yanPingWang_8的博客
11-08 2317
        #import <UIKit/UIKit.h>   NS_ASSUME_NONNULL_BEGIN   @interface WYPSeparateSetCodeView : UIView   @property (weak, nonatomic) IBOutlet NSLayoutConstraint *bottomViewLayout;  ...
React-Native解决键盘遮挡问题：自定义原生模块获取键盘高度
在React-Native应用中，当用户在TextInput组件中输入时，弹出的键盘有时会覆盖输入框，导致用户体验下降。React-Native的标准TextInput组件并未内置处理这种键盘遮挡问题的机制。为了解决这一问题，开发者通常需要...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值