ios下点击穿透focus获取问题

在ios下的浏览器中当点击当前页的一个按钮,用window.location.href进行跳转时,如果下一个页面里这点击按钮的位置是一个textarea或者text等那么他会触发focus事件,会出现ios自带的输入框要防止这个问题的出现需要站在点击前一页时使用preventDefault()阻止默认时间就可以解决了!…

【移动端debug-4】iOS下setTimeout无法触发focus事件的解决方案

开篇总结:其实目前无法解决这个bug. 这两天做项目遇到了这个case,项目需求是打开页面的时候,input元素自动弹起键盘.由于各种方面的考虑,我们希望通过setTimeout延时200毫秒让input元素focus,demo代码如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>IOS下setTimeout无…

iOS下调用元素的focus方法，input元素不聚焦，键盘不弹起的问题

页面元素 <input type="text" ref="elInput"/> <div style="margin-top:20px;" @click="confession()" ref="elBtn">点击使input聚焦 </div> js代码 methods(){ confession(){ this.$refs.elInput.focus()//显示键盘 }…

网页在ios下点击无效的原因

之前在做一个项目的时候,发现元素在ios系统中点击无法触发效果,网上查了一下发现 ios下如果不是button,input这类标签的话 ,如果有点击事件的话最好给加一个css样式cursor:pointer;之后居然神奇的就可以了相信对你一定有用!…

on 在ios下父对象是body的时候会不调用

on 用委托的形式绑定事件在ios下父对象是body 获取 docment的时候会不调用解决方案在这些元素上加 cursor: pointer;…

移动web在ios和android下点击元素出现阴影问题

移动web开发经验总结 1.-webkit-tap-highlight-color:rgba(255,255,255,0)可以同时屏蔽ios和android下点击元素时出现的阴影.备注:transparent的属性值在android下无效. 2.-webkit-appearance:none可以同时屏蔽输入框怪异的内阴影. 3.-webkit-transform:translate3d(0, 0, 0)在ios下可以让动画更加流畅(这个属性会调用硬件加速模式),但是在android下不可乱用,…

Cordova webapp实战开发：（6）如何写一个iOS下获取APP版本号的插件？

上一篇我们学习了如何写一个Andorid下自动更新的插件,我想还有一部分看本系列blog的开发人员希望学习在iOS下如何做插件的吧,那么今天你就可以来看看这篇文字了. 本次练习你能学到的学习如何获取iOS当前版本号学习iOS下插件类的编写学习iOS下插件的配置学习iOS下插件的调用主要内容 APP中[检查更新]显示当前版本号插件类的编写在上一篇介绍Andorid插件时我们贴出了很多源码,这里也直接贴出代码,首先是iOS下插件的代码. 我们在Plugins下新建两个文件,一个头文件…

ios下，<input type="checkbox"> 点击时出现黑色块

ios下,<input type="checkbox"> 点击时出现黑色块如下图解决方法:…

记录下hbuilder vue项目打包APP 在IOS上点击延迟的问题

做的项目打包成APP在IOS 上有延迟问题,在安卓下却不会,联想到之前用IONIC时打包的APP也是在IOS下有300毫秒延迟问题.所以只能认吧. 安装fastclick 插件: npm install fastclick --save-dev 在所需的页面上引入 import FastClick from "fastclick"; 在相对应的页面mouned里面调用 mounted() { FastClick.attach(document.body); } 其实放在公用的路…

ios下fixed回复框bug的解决方案

前几天做一个移动端的页面,要加个像微信那样附着在底部的回复框,按照做PC端网页的思路,首先是用fixed,在安卓上测了一下是好的,结果到朋友的iphone6p上就不行了,点击输入框之后它总会跳到屏幕中间去. 后来才知道这是ios下一个普遍的bug,所以我决定把原因和解决方案整理一下,以方便后人. 网上有的人说用那个iscroll.js来解决,不过那样会出现很多样式上的冲突,而且为了一个fixed的bug就动用一个js,未免有点大材小用了. 原因 ios下面,软键盘唤起后,页面的 fixed 元素…

iOS检测用户截屏并获取所截图片

iOS检测用户截屏并获取所截图片微信可以检测到用户截屏行为(Home + Power),并在稍后点击附加功能按钮时询问用户是否要发送刚才截屏的图片,这个用户体验非常好.在iOS7之前, 如果用户截屏,系统会自动取消屏幕上的所有 touch 事件,(使用 touchesCancelled:withEvent : 这个方法)那么我们就可以检测这个方法的调用,然后加载本地最新图片再加以判断来实现我们的目的.但在 iOS 7 之后,截屏不再会取消屏幕的 touch 事件,所以导致了 Snapchat…

web移动端Fixed在Input获取焦点时ios下产生的BUG及处理

1.现象可以看到下面两张图,图1搜索框为fixed固定在顶部,滚动没有任何问题. 图2当光标进入搜索框时,ios自作聪明的把光标定位到中间,并且fixed属性被自动修改成了absolute.此时注意滚动页面的话,会发现原本fixed的搜索框跟着文档一起滚动了. 再仔细观察ios下的一些特点,ios为了让input垂直居中,甚至还滚动了滚动条,原本看不到的上半段产品的内容也漏出来了. 2. 参考别人的解决方法在网上搜索过后,大部分都是转载的这一篇文章,甚至配图都是拿别人原来的: http://…

移动端踩坑之旅-ios下fixed、软键盘相关问题总结

最近一个项目掉进了移动端的大坑,包括ios下fixed布局,h5唤起键盘等问题,作为一个B端程序员,弱项就是浏览器的兼容性和移动端的适配(毕竟我们可以要求使用chrome),还好这次让我学习了一下相关知识.让我们一起来看一下我怎么挣扎出这个大坑的. 一.背景先看一下要做什么,也就是一个文章评论的版块,下面依次有输入框,点赞,收藏等 .大概长下面这个样子: 要求也很常规,吸底,输入评论提交.那么上来就输代码吧. 二.ios下fixed布局关于这种吸底操作,上来就直接选用fixed了,这种场景舍…

iOS下JS与OC互相调用（四）--JavaScriptCore

前面讲完拦截URL的方式实现JS与OC互相调用,终于到JavaScriptCore了.它是从iOS7开始加入的,用 Objective-C 把 WebKit 的 JavaScript 引擎封装了一下,提供了简单快捷的方式与JavaScript交互. 关于JavaScriptCore的使用有两篇很好的文章: NSHipster中文版的JavaScriptCore iOS7 新JavaScriptCore框架入门介绍看了上述两篇文章,对JavaScriptCore应该已经基本了解了.我就简要介…

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

这是去年总结的一篇文章,也一并先放到这个目录下好了. iOS开发免不了要与UIWebView打交道,然后就要涉及到JS与原生OC交互,今天总结一下JS与原生OC交互的两种方式. JS调用原生OC篇方式一第一种方式是用JS发起一个假的URL请求,然后利用UIWebView的代理方法拦截这次请求,然后再做相应的处理. 我写了一个简单的HTML网页和一个btn点击事件用来与原生OC交互,HTML代码如下: <html> <header> <meta http-equiv=&qu…

iOS下WebRTC音视频通话（二）-局域网内音视频通话

这里是iOS 下WebRTC音视频通话开发的第二篇,在这一篇会利用一个局域网内音视频通话的例子介绍WebRTC中常用的API. 如果你下载并编译完成之后,会看到一个iOS 版的WebRTC Demo.但是那个demo涉及到外网的通讯需要FQ,而且还有对信令消息的封装理解起来非常的困难. 但是,我将要写的这个demo去掉了STUN服务器.TURN服务器配置,以及信令的包装,基本上是用WebRTC进行音视频通话的最精简主干了,非常容易理解. 准备因为这个Demo用到了我之前写的另外两个工程: 一个…

移动端底部fixed固定定位输入框ios下不兼容

简短记录下最近开发移动端项目碰到的小坑,产品需求做一个售后对话页面,底部固定输入框,和微信对话差不多,但是在ios下,fixed失效,输入框被虚拟键盘挡住,在安卓下是正常的. 尝试过网上说的很多方法,因为每个页面的需求和布局可能不相同,比如我做的需要下拉刷新消息,上拉加载更多,用的是minit-UI来做,所以都没有效果后面无奈用了两套代码,用 var u = navigator.userAgent, app = navigator.appVersion;var isiOS = !!u.matc…

iOS 【终极方案】精准获取webView内容高度，自适应高度

前言:是这样的,刚写完上一篇文章还没缓过神来,上一篇文章我还提到了,想和大家聊聊原生+H5如何无缝连接的故事.结果我朋友就给我发了两篇他的作品.他的做法也都有独到之处.好的文章都是这样,让你每次看都能有新的收获,我们也都致力于写一些能帮别人解决问题的文章,下面我用另一种方式来完美实现这个问题.毕竟之前大家都是根据UIWebView写的,我来说说换成WK之后的区别,主题思路也不同哦~ 插两个链接,是我朋友的大家也可以做个对比 iOS [终极方案]精准获取webView内容高度,自适应高度 iOS…

IOS下 input 被软键盘方案遮盖问题解决

前言: 并没有完美解决 ! 场景: 最近在做企业微信H5的一个项目,里面有个动态列表页,开始输入框是隐藏的,点击评论才会出现并让 input 聚焦.经过测试在安卓上面应该没什么问题,但是iOS上面会出现 input 被软键盘遮盖或者半遮盖.甚至发送按钮不能点击的状况. 总的来说问题有点小严重. 查阅百度: 好的,百度一搜,哇!解决方案很多,我就放心的去抽了一根烟,想着分分钟完事.BUT 经过试验百度 “ios 下input 被软键盘遮盖” 前两页没有一个能解决我的问题的!!! 不过收获还是有的…

iOS下原生与JS交互(总结)

iOS开发免不了要与UIWebView打交道,然后就要涉及到JS与原生OC交互,今天总结一下JS与原生OC交互的两种方式. JS调用原生OC篇(我自己用的方式二,简单方便) 方式一第一种方式是用JS发起一个假的URL请求,然后利用UIWebView的代理方法拦截这次请求,然后再做相应的处理.我写了一个简单的HTML网页和一个btn点击事件用来与原生OC交互,HTML代码如下: <html> <header> <meta http-equiv="Content-Ty…

点击穿透bug · Jaywii

微信点击穿透Bug 问题描述:在移动端为了去除点击延迟引入了fast-click,然而在房贷计算器的开发中遇到了这样一个bug,用户点击了select之后,微信在弹出选择器之后会瞬间因为约300ms的点击穿透而立刻收起来,导致用户无法使用选择器,最初尝试在用户点击了Select之后为select下面的表单层添加pointer-events:none的CSS样式避免屏蔽点击效果,结果发现这样做只能保障穿透下去的点击事件不会点进input框导致聚焦事件发生,但是依旧无法避免弹出来的选择器收起来,初步…

web前端在 iOS下 input不能输入以及获取焦点之后会出现蓝色的border轮廓

iOS下 input 不能获取焦点获取焦点后:设置border:none无效果 .hb_content input{ display: inline-block; margin-left: 0.225rem; height: 1rem; border: none !important; outline: none; /** 控制iOS获取焦点后的轮廓 */ color: #000000; font-size: 100%; width: 50%; -webkit-user-select: aut…

记一次事件委托在 ios 下的兼容 bug

项目中碰到的兼容类 bug,记录一二. 页面上有几个同类型的控件,点击它们会触发一些事件,很显然,事件委托优于批量绑定.为了图方便,我将 click 事件绑定到了 document.body 上(绑定在 document 上也是一样),在安卓机上反应良好,ios 上居然不会触发点击事件! 试着将事件绑定到了控件的父级元素,问题消失了. 事实上,当使用事件委托给一个元素添加 click 事件时,如果事件是委托到 document 或 body 上,并且委托的元素是默认不可点击的(如 div, sp…

iOS [[NSBundle mainBundle] pathForResource:@"" ofType:@""]无法获取到文件

将一个文件导入到工程中后,用[[NSBundle mainBundle] pathForResource:@"" ofType:@""]来获取到该文件时,一直无法拿到这个文件,解决方法如下在Build Phases -> Copy Bundle Resources下点击加号(+) 选择刚刚添加进工程的文件,店家add 这样就可以用[[NSBundle mainBundle] pathForResource:@"" ofType:@&quo…

IOS下自定义click事件使用alert引发的血案

使用过iscroll插件的同学都知道iscroll支持自定义事件,即在调用iscroll时参数赋值options.click = true. 接下来定义事件如: $clinicAppoint.on('click', function(event) { if($(event.target).closest('#clinic-select').size() > 0 ) { alert($(event.target).closest('#clinic-select')[0].id); }else if…

ios下Safari无法触发click事件的处理

ios下的Safari真是傲娇啊,坑好多. 首先上代码 <!DOCTYPE html> <html> <head> <title>122</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"&…

iOS下使用SHA1WithRSA算法加签源码

首先了解一下几个相关概念,以方便后面遇到的问题的解决: RSA算法:1977年由Ron Rivest.Adi Shamirh和LenAdleman发明的,RSA就是取自他们三个人的名字.算法基于一个数论:将两个大素数相乘非常容易,但要对这个乘积的结果进行因式分解却非常困难,因此可以把乘积公开作为公钥.该算法能够抵抗目前已知的所有密码攻击.RSA算法是一种非对称算法,算法需要一对密钥,使用其中一个加密,需要使用另外一个才能解密.我们在进行RSA加密通讯时,就把公钥放在客户端,私钥留在服务器. PE…

Cocos2d-x在win32，android和IOS下的文件读写问题

最近在学习和使用Cocos2d-x框架,虽然说的是跨平台,但是在用VS进行开发,然后移植到android或IOS下,也可能会出现各种问题,需要做细微的调整. 例如我在做文件读写操作的时候,很可能在win32上毫无问题,但是到了IOS上就Get Data Failed. 在经过多次尝试后,发现了以下方法进去读取,可以直接在win32,android和IOS下使用: [cpp] view plaincopy #if (CC_TARGET_PLATFORM == CC_PLATFORM_IOS) st…

ios中从相册:相机中获取图片信息

ios中从相册/相机中获取图片信息从相册中获取图片的信息 UIImagePickerController *imgPickView = [[UIImagePickerController alloc] init];//获取相册的类 imgPickView.delegate = self;//设置delegate imgPickView.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;//设置获取相册中的图片的方法 imgPi…

解决IOS下不支持fixed的问题

我们公司有一个页面底部用到了fixed样式,每当弹出键盘的时候,IOS下fixed就会走样(据我所知android没有该问题). 为此之前我经过产品的同意做了简单的处理(方法1). 方法一: focus的时候让fixed块position变为relative,这是最简单的处理方法. 下面是我的小demo <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf…

【ios下点击穿透focus获取问题】的更多相关文章