h5页面ios 多个input切换时 页面会回到顶部

最新推荐文章于 2024-04-28 01:25:06 发布
最新推荐文章于 2024-04-28 01:25:06 发布
阅读量1k 收藏
点赞数
分类专栏： ios兼容踩坑 文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cainiaohhhh/article/details/106956132
版权

h5页面ios 多个input切换时 页面会回到顶部

这个兼容问题是 mui问题，踩坑

踩坑小能手hhh
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
详解h5页面在不同ios设备上的问题总结
12-13
最近在写嵌入到小程序webview的一个h5页面，是一个文章评论的功能，这个过程中，遇到很多兼容性的问题，在不同机型上的表现也很不一致，所以总结了以下这些问题，记录下来，以便以后查看 1、日期问题 对于yyyy-mm-dd hh:mm:ss 这种格式在ios系统不识别 时间格式化的时候，在浏览器端处理好好的，到了手机端，就变成NAN，或者null，这种情况，是ios系统不能转化这种类型的时间。 let date = new Date('2019-02-28 18:33:24'); // null` 解决方案是，转成 yyyy/mm/dd hh:mm:ss 这种格式就可以了   rep
记mui之 “h5页面ios 多个input切换时 页面会回到顶部”
MR_SNAIL的博客
10-14 655
问题描述：ios端页面滑动至最底部，点击input框输入文字等，点击其他地方，页面滚动条会滚动到顶部。 解决方法： html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; -webkit-touch-callout: none; -webkit-user-select: none; } .mui-content { height: 100%; overflow: auto; } ...
混合开发-h5页面与ios、安卓之间的通信（H5篇）
01-20
混合开发-h5页面与ios、安卓之间的通信（H5篇） WebView(网络视图)能加载显示网页，可以将其视为一个浏览器。它使用了WebKit渲染引擎加载显示网页 首先你需要判断是哪端 使用navigator.userAgent获取浏览器属性 下面的可能不准确 具体的 webView的userAgent 根据ios 安卓而定 // 可能不准确 具体的 webView的userAgent 根据ios 安卓而定 var ua = navigator.userAgent; trident: ua.indexOf('Trident') > -1, // IE
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
12-11
前言：微信H5项目，ios端出现了软键盘输完隐藏后页面不会回弹，下方会有一大块留白 最近微信和ios都有版本升级，不知道是哪边升级造成的，但是经过测试，软键盘收起后，再滚动一下页面，下面的留白就会消失。所以只要在输入完毕后模拟一下这个“滚动”的操作，就能解决问题了。 如果是用vue写的： <input type="text" @blur="fixScroll" placeholder="请输入xxx"/> //methods中添加： fixScroll() { window.scrollTo(0, 0); } 因为这个问题只在iOS端出现所以使用前进行一下判断： fixScroll(
h5页面ios，双击向上滑动，拖拽到底部还能继续拖拽
01-03
在ios下，双击屏幕某些地方，滚动条会自动向上走一段。 当用微信看h5的时候，拖拽到底部，会漏出来，微信自带下面的灰黑色皮肤。 用js解决一下吧，这俩问题很类似，总结到一起了。 ———-特别注意，安卓没有发生过这些情况，因为解决办法是给最外层的wrapper，overflow-y:auto;也就是放弃了原生的滚动条，所以解决的时候要判断一下系统，安卓就不用处理了。 html部分：---------------------------- 内容部分aaaa111 内容部分aaaa222 内容部分aaaa333 css部分：-------------------------- .wrapper2
微信小程序app嵌套H5页面，部分苹果手机点击输入框导致页面被顶起，按钮不灵敏
Stavin Li的博客
06-22 3027
解决办法： scrollTop
在iOS设备下，h5的input框失焦后页面被顶起来一部分bug解决
weixin_34344403的博客
01-21 1849
在iOS12之后，h5的input框失焦后页面会出现被顶上去一部分的bug,下面就来看下怎么解决这个bug，首先我们必须知道这两个方法focusin(软键盘弹起事件)、focusout(软键盘关闭事件)。注意：这里的input框的位置是在页面的底部 废话不多说，直接上代码//解决iOS软键盘弹起把页面顶起来一部分的bug var ...
【h5】ios自带输入法输入中文时多次触发input事件的处理
韩旭不会敲代码吧的博客
12-05 1126
ios自带输入法输入中文时多次触发input事件的处理
iOS中input框问题
09-19
解决苹果手机中input输入框,在弹出软键盘之后,fixed定位失效的问题,是用css解决的
解决ios h5 input输入框被输入法弹出一块区域的问题
08-27
今天小编就为大家分享一篇解决ios h5 input输入框被输入法弹出一块区域的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
iOS和H5页面交互拦截
02-22
用于移动端和前端进行交互，H5页面获取iOS端点击事件，iOS端获取H5点击事件，实现实时交互
微信小程序解决ios页面上推问题
IT_iosers的博客
11-14 1123
相信大家写原生小程序都遇到过一个问题，当输入框聚焦键盘弹起时，页面会自动上推，使得输入框刚好位于键盘之上，在安卓中推动的只是内容，但在ios中，推动的是整个页面，导致导航栏被推出屏幕外，如下：针对这个问题，目前的解决方案是将自动上推改成手动上推，让我们自己来控制页面内容的滚动。
H5页面常见开发问题总结
Cole31415的博客
05-20 886
摘要 最近在开发H5，就在开发过程中发现H5存在着一些坑，所以就总结一下在开发过程中遇到的坑以及解决办法，本文会持续的更新，同时也欢迎大家一起评论分享H5开发中遇到的坑、解决办法等。 常见的通用的H5开发问题 IOS端-H5开发问题 输入法收起隐藏页面留白 问题现象：ios端软键盘失去焦点（隐藏）后，页面不会回弹，页面下方会留下输入法块的白色块。 暴力解决方案：软键盘收起（隐藏）后，滚动一下页面，页面中的留白块块就会消失。所以只要在输入完毕后实现一下‘滚动’的操作就可以解决问题。 React(Reac
html文本框光标错位,IOS中position:fixed导致的input、textarea光标错位
weixin_39672979的博客
06-03 457
形成原因：input输入的时候，输入法键盘弹出的时候会把页面上推，input失去焦点时，键盘消失，页面恢复正常。但是position:fixed的时候，页面恢复但是“输入区域”却没有恢复，所以导致点击错位。其实可以设置成position:absolute，就会发现键盘消失后页面并没有恢复原位。解决办法就是给input添加blur事件，失去焦点的时候页面滑到顶端，具体代码如下：$("input,te...
Html5解决ios系统中input、select、textarea控件在失去焦点时，因为页面上移，导致页面焦点错位的问题
沧海龙腾LV的博客
12-21 1658
实现： ios_adapter.js //问题描述：在IOS12以上的微信端，出现input弹出后结算按钮点击无反应的情况。 //分析：是由于IOS端第三方输入法的软键盘弹出后，焦点无法复位。 //解决微信苹果ios，输入框，下拉菜单错位的问题 //解决input输入后和select选择后页面底部留白的问题 //方法：每次失去焦点的时候页面和元素滚动到0的位置 //判断设备类型 var ...
html onblur ios,移动web端键盘问题、IOS安卓机input/textarea兼容性
weixin_29325515的博客
06-19 489
前言：移动web开发中，安卓和IOS的input/textarea输入框在调用键盘是有差异的：安卓机键盘覆盖在页面底部；IOS机键盘将整个页面向顶部推。两种实现在真机上都会导致页面出现某些小问题，本篇主要作用是收录这类问题(也欢迎提供各种问题或者更好的解决方案或指出本文错误，共勉)，我会持续更新陆续将遇到到或者身边人遇到的总结到这里，方便自己或者用到的人需要的时候翻出来看看。一、IOS机(1)问题...
HTML5（1）
最新发布
cookies_s_的博客
04-28 1806
网页制作思路：从上到下，先整体再局部，逐步分析制作分析内容->写代码->保存->刷新浏览器->看效果Vue.js(发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，可以高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。
OS App 嵌入 H5页面，H5页面怎么跟IOS通讯？
07-15
在 iOS App 中嵌入 H5 页面后，你可以通过以下几种方式实现 H5 页面与 iOS App 的通信： 1. JavaScriptCore：使用 JavaScriptCore 框架可以在 iOS App 中执行 JavaScript 代码，并且可以通过 JavaScriptCore 提供的 API 在 JavaScript 和原生代码之间进行双向通信。你可以将 JavaScript 对象暴露给 H5 页面，使其可以调用原生方法，同时也可以在原生代码中调用 JavaScript 方法。 2. WKWebView 的 messageHandler：在使用 WKWebView 加载 H5 页面时，你可以通过设置 `WKScriptMessageHandler` 来实现 H5 页面与 iOS App 的通信。你可以在 H5 页面中使用 `window.webkit.messageHandlers.<handlerName>.postMessage(<message>)` 来向 iOS App 发送消息，而在 iOS App 中则需要实现 `WKScriptMessageHandler` 的代理方法来接收和处理这些消息。 3. URL Scheme：通过使用自定义的 URL Scheme，你可以在 H5 页面中通过跳转 URL 的方式来触发 iOS App 的特定操作。iOS App 可以注册自己的 URL Scheme，并在 H5 页面中通过打开特定的 URL 来传递数据或触发相应的处理逻辑。 4. JavaScript Bridge 框架：还有一些第三方库或框架，如 WebViewJavascriptBridge、WebViewJavascriptBridge等，提供了更便捷的方式来实现 H5 与 iOS App 的通信。这些框架通常会封装底层的通讯细节，简化了双向通信的实现过程。 这些方法各有优劣，你可以根据具体需求和场景选择合适的方式来实现 H5 页面与 iOS App 的通信。希望对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值