开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

当键盘打开时，Cordova ios WKWebView first touchstart事件不会触发

当键盘打开时，Cordova iOS WKWebView的first touchstart事件不会触发的原因是WKWebView在iOS上的默认行为。WKWebView是苹果公司推出的用于替代UIWebView的新一代Web视图组件，它在性能和功能上有所提升。

在iOS上，当键盘打开时，WKWebView会自动调整页面的布局以适应键盘的显示，这可能会导致first touchstart事件不会触发。这是因为WKWebView会将键盘的触摸事件优先处理，以确保用户可以正常地与键盘进行交互。

要解决这个问题，可以尝试以下几种方法：

使用其他的触摸事件：可以尝试使用其他的触摸事件，如touchend、touchmove等来替代first touchstart事件。根据具体的业务需求，选择合适的触摸事件来处理相应的逻辑。
监听键盘的显示和隐藏事件：可以通过监听键盘的显示和隐藏事件来处理相应的逻辑。可以使用Cordova提供的键盘插件或者原生的键盘通知来实现。
使用JavaScript与原生代码进行交互：可以通过JavaScript与原生代码进行交互来解决该问题。可以在键盘打开时通过JavaScript调用原生代码，然后在原生代码中处理相应的逻辑。

需要注意的是，以上方法仅适用于Cordova开发中使用WKWebView的情况。如果使用的是UIWebView或其他WebView组件，可能会有不同的解决方法。

推荐的腾讯云相关产品：腾讯云移动应用分析（MTA），该产品可以帮助开发者深入了解移动应用的用户行为和使用情况，提供数据分析和用户行为分析等功能。产品介绍链接地址：https://cloud.tencent.com/product/mta

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

移动端app开发问题及理解

ondrop 当被拖元素正在被拖放是运行的脚本 onmousewheel 当鼠标滚轮整被滚动时 onscroll 元素滚动条被滚动时移动端事件有 click 单击事件类似于pc端click...，移动端中，连续click触发有200ms-300ms的延迟 touch 触摸类事件 touchstart 手指触摸到屏幕触发 touchmove 手指在屏幕上移动触发 touchend 手指离开屏幕触发...touchcancel 可由系统进行的触发，比如手指触摸屏幕时，突然alert了，或者系统中其他打断了touch行为可触发 tap触碰类事件一般用于代替click事件 tap 手指碰一下屏幕触发...触发机制是：加载页面会触发，点击按钮打开模态框触发，点击确定触发，点击取消触发。...iPhone的UIWebView（iOS2.0-12.0 ），WKWebView（iOS8.0+，macOS10.10+），Android的WebView WebView可以理解为手机应用中运行和展示网页的界面和接口

3.8K1 0

吃透移动端 H5 与 Hybrid｜实践踩坑12种问题汇总

产生原因在 iOS 中，手指按住屏幕上下拖动，会触发 touchmove 事件。这个事件触发的对象是整个 webview 容器，容器自然会被拖动，剩下的部分会成空白。解决方案 1....双层元素叠加时，在上层元素上绑定 touch 事件，下层元素绑定 click 事件。...如果将 click 替换成 touchstart 会怎样？事件触发顺序: touchstart, touchmove, touchend, click。...== scrollParent.scrollTop) { return true; } 主要目的就是，在使用 touchstart 合成 click 事件时，保证其不在滚动的父元素之下。...软键盘将页面顶起来、收起未回落问题表现 Android 手机中，点击 input 框时，键盘弹出，将页面顶起来，导致页面样式错乱。移开焦点时，键盘收起，键盘区域空白，未回落。

2.1K2 0

吃透移动端 H5 与 Hybrid｜实践踩坑12种问题汇总

产生原因在 iOS 中，手指按住屏幕上下拖动，会触发 touchmove 事件。这个事件触发的对象是整个 webview 容器，容器自然会被拖动，剩下的部分会成空白。解决方案 1....双层元素叠加时，在上层元素上绑定 touch 事件，下层元素绑定 click 事件。...如果将 click 替换成 touchstart 会怎样？事件触发顺序: touchstart, touchmove, touchend, click。...== scrollParent.scrollTop) { return true; } 主要目的就是，在使用 touchstart 合成 click 事件时，保证其不在滚动的父元素之下。...软键盘将页面顶起来、收起未回落问题表现 Android 手机中，点击 input 框时，键盘弹出，将页面顶起来，导致页面样式错乱。移开焦点时，键盘收起，键盘区域空白，未回落。

1.2K3 0

【Hybrid】518- 12种移动端 H5 与 Hybrid问题汇总

产生原因在 iOS 中，手指按住屏幕上下拖动，会触发 touchmove 事件。这个事件触发的对象是整个 webview 容器，容器自然会被拖动，剩下的部分会成空白。解决方案 1....双层元素叠加时，在上层元素上绑定 touch 事件，下层元素绑定 click 事件。...如果将 click 替换成 touchstart 会怎样？事件触发顺序: touchstart, touchmove, touchend, click。...== scrollParent.scrollTop) { return true; } 主要目的就是，在使用 touchstart 合成 click 事件时，保证其不在滚动的父元素之下。...软键盘将页面顶起来、收起未回落问题表现 Android 手机中，点击 input 框时，键盘弹出，将页面顶起来，导致页面样式错乱。移开焦点时，键盘收起，键盘区域空白，未回落。

1.3K2 2

移动端必备的H5问题及解决方案

产生原因在 iOS 中，手指按住屏幕上下拖动，会触发 touchmove 事件。这个事件触发的对象是整个 webview 容器，容器自然会被拖动，剩下的部分会成空白。...双层元素叠加时，在上层元素上绑定 touch 事件，下层元素绑定 click 事件。...如果将 click 替换成 touchstart 会怎样？事件触发顺序: touchstart, touchmove, touchend, click。...== scrollParent.scrollTop) { return true; } 主要目的就是，在使用 touchstart 合成 click 事件时，保证其不在滚动的父元素之下。...五、软键盘将页面顶起来、收起未回落问题表现 Android 手机中，点击 input 框时，键盘弹出，将页面顶起来，导致页面样式错乱。移开焦点时，键盘收起，键盘区域空白，未回落。

4.2K4 2

12个关于移动 H5 开发的采坑问题汇总

产生原因在 iOS 中，手指按住屏幕上下拖动，会触发 touchmove 事件。这个事件触发的对象是整个 webview 容器，容器自然会被拖动，剩下的部分会成空白。解决方案 1....双层元素叠加时，在上层元素上绑定 touch 事件，下层元素绑定 click 事件。...如果将 click 替换成 touchstart会怎样？事件触发顺序: touchstart, touchmove, touchend, click。...== scrollParent.scrollTop) { return true; } 复制代码主要目的就是，在使用 touchstart 合成 click 事件时，保证其不在滚动的父元素之下。...软键盘将页面顶起来、收起未回落问题表现 Android 手机中，点击 input 框时，键盘弹出，将页面顶起来，导致页面样式错乱。移开焦点时，键盘收起，键盘区域空白，未回落。

1.5K2 0

2017移动前端的一些总结web前端 —— 移动端知识的一些总结一.css部分二.js部分

中，当你点击比如 input 准备输入时，虚拟键盘弹出，整个视窗的高度就会变为减去键盘的高度，加入你在底部有 fixed的元素比如 btn，这个元素就会跑上来，一般都不会太美观。... keyup统计字符数时，系统不会自动监控你选择文字的事件，比如打了多个拼音，可能选择的实际文字比输入的字符数多或者少，但无法在用户确定自己的输入时监控到 keyup（其他事件也一样）判断字符数。...如果页面一开始没有`style`值，`rotate`是写在`CSS`里的，需要用到`getComputedStyle`，具体请看[这里][5] 3.有些版本的 iphone4中， audio和 video默认播放事件不会触发...，比如使用 window.onload或计时器等都不能触发播放，必须用 JS写事件让用户手动点击触发才会开始播放，比如 $(document).one('touchstart',function(){...使用 touchstart会立即触发，而使用 click则用有大概 0.3s的延迟想模拟一个立即触发的点击事件有两种方法， fastclick.js和 zepto.js里的 tap事件。

3.7K4 0

javaScript — touch事件详解（touchstart、touchmove和touchend）

一开始触摸事件touchstart、touchmove和touchend是iOS版Safari浏览器为了向开发人员传达一些信息新添加的事件。...因为ios设备既没有鼠标也没有键盘，所以在为移动Safari浏览器开发交互性网页的时候，PC端的鼠标和键盘事件是不够用的。...下面具体说明： touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。 touchmove事件：当手指在屏幕上滑动的时候连续地触发。...在这个事件发生期间，调用preventDefault()事件可以阻止滚动。 touchend事件：当手指从屏幕上离开的时候触发。 touchcancel事件：当系统停止跟踪触摸的时候触发。...(返回当事件被触发时，鼠标指针的水平坐标)、clientY(返回当事件触发时，鼠标指针的垂直坐标)、screenX(当某个事件被触发时，鼠标指针的水平坐标)和screenY(返回当某个事件被触发时，鼠标指针的垂直坐标

1.7K2 0

移动Web 开发中的一些前端知识收集汇总

添加初始化图片用户点击你桌面上的webapp的图标后，打开会加载浏览器（实际上是webkit webview模块），然后下载、解析、渲染，在这个过程中，ios允许我们使用一个初始化图片来替代白色的浏览器屏幕...关闭iOS中键盘自动大写、自动更正、自动完成在iOS中，当虚拟键盘弹出时，默认情况下键盘是开启首字母大写的功能的，根据某些业务场景，可能我们需要关闭这个功能，移动版本webkit为input元素提供了...ios的safari的click事件在短按屏幕时会有明显延迟（相对用户手离开屏幕那一刻大约300ms），因此建议采用 touchstart 事件。...或者是说使用封装的 tap 事件来代替click 事件，所谓的 tap 事件由 touchstart 事件 + touchmove 判断 + touchend 事件封装组成。...(iOS, Android 2.2+): touchstart, touchmove, touchend, touchcancel gesture事件 (Apple only, iOS 2+): gesturestart

3.8K5 0

使用 Cordova 构建应用的流程

新建 / 打开 Cordova项目 $ cordova create hello com.example.hello HelloWorld cordova 创建脚本生成一个基本目录结构 web-based...当点击按钮时，它会被触发。在这个函数中，我们调用由插件API提供的 navigator.camera 全局对象。...使用 SPA 可以帮助您以更高效的方式组织应用程序，但它对 Cordova 应用程序也有特定的好处。在使用任何插件之前，Cordova 应用程序必须等待备份 / 备份事件触发。...使用 touchstart 或者 touchend 会带来显著的改进——300毫秒听起来不算多，但是它可能会导致 UI 更新和行为的不稳定。...例如，具有 ios 风格的用户界面的 Android 应用程序可能不会受到用户的欢迎。这有时甚至是由各种应用程序存储强制执行的。

4.2K1 1

Hybrid App 应用开发中 9 个必备知识点复习(WebView 调试等)

实践发现 WKWebView 实例其实也会将 Cookie 存储于 NSHTTPCookieStorage 中，但存储时机有延迟，在 iOS 8上，当页面跳转的时候，当前页面的 Cookie 会写入 NSHTTPCookieStorage...9. goBack API问题 WKWebView 上调用 -[WKWebView goBack], 回退到上一个页面后不会触发window.onload() 函数、不会执行JS。 10....状态; 出现所需的数据; webview1 当 App 首次打开时，默认是并不初始化浏览器内核的；只有当创建 WebView 实例的时候，才会创建 WebView 的基础框架。...这种方法可以比较有效的减少 WebView 在App中的首次打开时间。当用户访问页面时，不需要初始化 WebView 的时间。当然这也带来了一些问题，包括：额外的内存消耗。...； break on Attributes modifications 选项，是指当节点属性发生变化时断点； break on node removal 选项，是指当节点被移除时断点

3.1K0 0

【Hybrid】288- Hybrid App 应用开发中 9 个必备知识点复习

：大多数App需要支持 iOS7 以上的版本，而 WKWebView 只在 iOS8 后才能用，所以需要一个兼容性方案，既 iOS7 下用 UIWebView ， iOS8 后用 WKWebView...实践发现 WKWebView 实例其实也会将 Cookie 存储于 NSHTTPCookieStorage 中，但存储时机有延迟，在 iOS8上，当页面跳转的时候，当前页面的 Cookie 会写入 NSHTTPCookieStorage...9. goBack API问题 WKWebView 上调用 -[WKWebViewgoBack], 回退到上一个页面后不会触发 window.onload() 函数、不会执行JS。 10....状态; 出现所需的数据; 当 App 首次打开时，默认是并不初始化浏览器内核的；只有当创建 WebView 实例的时候，才会创建 WebView 的基础框架。...选项，是指当节点属性发生变化时断点； node removal 选项，是指当节点被移除时断点； 2. console 调试参考文章：[《Console调试常用用法》] (https://blog.csdn.net

2.3K2 0

Hybrid App 应用开发中 9 个必备知识点复习

实践发现 WKWebView 实例其实也会将 Cookie 存储于 NSHTTPCookieStorage 中，但存储时机有延迟，在 iOS8上，当页面跳转的时候，当前页面的 Cookie 会写入 NSHTTPCookieStorage...9. goBack API问题 WKWebView 上调用 -[WKWebViewgoBack], 回退到上一个页面后不会触发 window.onload() 函数、不会执行JS。 10....状态; 出现所需的数据; 当 App 首次打开时，默认是并不初始化浏览器内核的；只有当创建 WebView 实例的时候，才会创建 WebView 的基础框架。...这种方法可以比较有效的减少 WebView 在App中的首次打开时间。当用户访问页面时，不需要初始化 WebView 的时间。当然这也带来了一些问题，包括：额外的内存消耗。...选项，是指当节点属性发生变化时断点； node removal 选项，是指当节点被移除时断点； 2. console 调试参考文章：[《Console调试常用用法》] (https://blog.csdn.net

2.6K2 0

Hybrid App 应用开发中 9 个必备知识点复习

：大多数App需要支持 iOS7 以上的版本，而 WKWebView 只在 iOS8 后才能用，所以需要一个兼容性方案，既 iOS7 下用 UIWebView ， iOS8 后用 WKWebView...实践发现 WKWebView 实例其实也会将 Cookie 存储于 NSHTTPCookieStorage 中，但存储时机有延迟，在 iOS8上，当页面跳转的时候，当前页面的 Cookie 会写入 NSHTTPCookieStorage...9. goBack API问题 WKWebView 上调用 -[WKWebViewgoBack], 回退到上一个页面后不会触发 window.onload() 函数、不会执行JS。 10....状态; 出现所需的数据; 当 App 首次打开时，默认是并不初始化浏览器内核的；只有当创建 WebView 实例的时候，才会创建 WebView 的基础框架。...选项，是指当节点属性发生变化时断点； node removal 选项，是指当节点被移除时断点； 2. console 调试参考文章：[《Console调试常用用法》] (https://blog.csdn.net

2.3K3 0

HTML5移动端开发的常用触摸事件

一开始触摸事件touchstart、touchmove和touchend是iOs版Safari浏览器为了向开发人员传达一些信息新添加的事件。...因为iOs设备既没有鼠标也没有键盘，所以在为移动Safari浏览器开发交互性网页的时候，PC端的鼠标和键盘事件是不够用的。　　...下面具体说明：　　touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。　　touchmove事件：当手指在屏幕上滑动的时候连续地触发。...在这个事件发生期间，调用preventDefault()事件可以阻止滚动。　　touchend事件：当手指从屏幕上离开的时候触发。　　touchcancel事件：当系统停止跟踪触摸的时候触发。...(返回当事件被触发时，鼠标指针的水平坐标)、clientY(返回当事件触发时，鼠标指针的垂直坐标)、screenX(当某个事件被触发时，鼠标指针的水平坐标)和screenY(返回当某个事件被触发时，鼠标指针的垂直坐标

1.6K1 0

移动端Webapp中的那些Bug

1.2 解决方案手动设置滑到边界时的scrollTop（scrollFix）当快滑到上边界或者下边界的值时，手动设置scrollTop与达到边界时相差一像素(上边界时：scrollTop = 1,...下边界时：scrollTop = elem.scrollHeight - elem.offsetHeight - 1)，这样就不会触发出界的极限条件。...2.2 解决方案爬墙爬到这么一个issue，3楼eddiemonge老哥说到了，在IOS下除非用户手动触发了输入框的focus事件，才会触发键盘，至于设置定时器也是不管用的；但是，手动点击一个按钮，在按钮的操作中再来执行...IOS输入框聚焦后页面整体上移，头部顶出 4.1 出现场景页面中有fixed头部，输入框，并且输入框靠下时，当输入框focus的时候，会将整个页面上移，导致头部被顶出去。...Android弹出的键盘遮住输入框 5.1 出现场景当输入框比较靠下时，android上弹出键盘，会将输入框遮住。

2.9K5 0

iOS小技能：富文本编辑器

formatBlock.length > 0) { items.push(formatBlock); } // Images // $('img').bind('touchstart...window.webkit.messageHandlers.openImage.postMessage($(this).attr("src")); // 给openImage 传递SRC参数 // 监听点击事件调研...侧代码 2.1 web页面获取焦点时弹出键盘 UIWebView 中 keyboardDisplayRequiresUserAction 设置为 NO A Boolean value indicating...去掉WKWebView键盘自带的工具条:修改browserView的inputAccessoryView属性getter方法返回nil @interface WKWebView (HackishAccessoryHiding...zss_editor.setScrollPosition(); zss_editor.enabledEditingItems(e); }); //输入文字时，

2.2K3 0

iOS下JS与原生OC互相调用(总结)

我写了一个简单的HTML网页和一个btn点击事件用来与原生OC交互，HTML代码如下： <meta http-equiv="Content-Type...3.JS用<em>打开</em>一个iFrame的方式替代直接用document.location的方式，以避免多次请求，被替换覆盖的问题。...')"; [context evaluateScript:textJS]; 重点： stringByEvaluatingJavaScriptFromString是一个同步的方法，使用它执行JS方法时，...iOS下JS与OC互相调用（一）--UIWebView 拦截URL iOS下JS与OC互相调用（二）--WKWebView 拦截URL iOS下JS与OC互相调用（三）--MessageHandler...（六）--WKWebView + WebViewJavascriptBridge iOS下JS与OC互相调用（七）--Cordova 基础 iOS下JS与OC互相调用（八）--Cordova详解+实战

4.9K3 0

分享超详细 WKWebView 开发和使用经验

didReceiveServerRedirectForProvisionalNavigation 当容器在加载数据时发生了错误 didFailProvisionalNavigation 当容器开始加载数据...当网页内容开始在主 Frame 开始渲染在提交主 Frame 导航期间发生了错误当接受 HTTPS 请求证书后执行当容器内容发生崩溃 UI代理 WKUIDelegate 打开新的 WebView...网页的导航代理，可以理解为网页的生命周期事件循环。...存储 WKWebsiteDataStore 以下情况中，WKWebView 在主动发送请求时不会携带 cookie。...Ajax 请求不会带上 Response 中 Set-Cookie 的值 302 跳转不会带上 Response 中 Set-Cookie 的值可以使用 iOS11 的新 API 对 WKWebView

4.7K3 0

移动端问题收集和解决

tap击穿问题问题描述绑定tap方法的dom元素，触发该方法时，该dom元素下方同一位置的dom元素会触发click事件或者有浏览器认为可以被点击交互的dom元素（input的focus事件）...也没用解决方案 1、上下元素使用同样的事件，同样适用tap或者click事件 2、使用fastclick库，会把click的300ms延迟干掉 3、自己封装tap事件，使用touchstart、touchend...compositionstart: 开始非直接输入开始时触发 compositionend：非直接输入结束时触发。...解决办法在实现过程中需要注意下面几个问题： 1、真正的输入框的位置计算：首先记录无键盘时的window.innerHeight，当键盘弹出后再获取当前的window.innerHeight，...两者的差值即为键盘的高度，那么定位真输入框自然就很容易了 2、在ios下手动获取焦点不可以用click事件，需要使用tap事件才可以手动触发 $('#fake-input').on($.os.ios

1.9K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭