vue移动端项目在IOS上点击输入框失效，需要点击多次

最新推荐文章于 2022-09-08 17:36:48 发布

GUOQIPING_

最新推荐文章于 2022-09-08 17:36:48 发布

阅读量826

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/GUOQIPING_/article/details/106646708

版权

1. 近期发现项目中关于输入框在ios上点击失效，多次点击才可以获取焦点的问题，那么导致这个问题所在的原因是因为项目中引入了FastClick 这个是解决移动端延迟300毫秒的优化
2.当使用FastClick 时，输入框在ios上点击输入调取手机自带输入键盘不灵敏，有时候甚至点不出来。而安卓上完全没问题。这个原因是因为FastClick的点击穿透。解决方法如下：

FastClick.prototype.focus = function (targetElement) {
   
  let length;
  if (targetElement.setSelectionRange && targetElement

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

GUOQIPING_

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

ios 移动端输入框点击不灵敏 fastclick

weixin_43803924的博客

04-01

599

###fastclick作用用于消除物理敲击与click移动浏览器上的事件触发之间的300ms延迟。（https://www.npmjs.com/package/fastclick） ###问题：在移动端，用了antd mobile的输入框组件，但是ios用户都反馈输入框点击不灵敏，有时候要点好几下才能点中输入框。 ###原因： 1.可能是样式上输入框被遮住了。 2.设备点击问题 ###尝试： 1.针对第一种可能，我在样式上给输入框加了z-index，还有宽高，但是问题还是有，所以排除第一种可能。 2.

vue移动端项目在IOS上点击输入框 失效，需要点击多次 input框BUG

qq_42359718的博客

04-08

1334

近期发现项目中关于输入框在ios上点击失效，多次点击才可以获取焦点的问题，那么导致这个问题所在的原因是因为项目中引入了FastClick 这个是解决移动端延迟300毫秒的优化当使用FastClick 时，输入框在ios上点击输入调取手机自带输入键盘不灵敏，有时候甚至点不出来。而安卓上完全没问题。这个原因是因为FastClick的点击穿透。解决方法如下： constFastClick=re...

1 条评论您还未登录，请先登录后发表或查看评论

vue fastclick 导致 a链接、click事件点击两次才生效

TGODS

01-15

2466

vue fastclick 导致 a链接、click事件点击两次才生效 vue 引入 fastclick插件后，有些a链接或者click事件需要点击两次，百度也搜不到，就只能看源码。。找到node_modules 依赖包下面的fastclick—lib—fastclick.js文件并找到 needsClick 方法 FastClick.prototype.needsClick = functi......

vue 解决ios编辑器输入框不能拉起

07-18

298

一、问题描述：Android 、pc、下可以正常使用，在ios下可以拉起输入框但是无法输入 <div contenteditable="true" ></div> 二、解决方法：给div新增以下全局样式 div{ -webkit-user-select:text; height:auto; } div *{ -webkit-user-sel...

解决vue项目iOS点击两次调起iOS键盘问题

lingFei_y的博客

04-28

1673

前几天项目碰到个iOS点击输入框轻轻点击输入框调用不起键盘，需要点击好多次才可以。最后在网上查询了好多资料才得以解决。进入正题，第一步查看是否安装了fastclick插件，就是看一下package.json文件有没有。如果么有就安装一下。命令如下： cnpm install fastclick --save 第二步：在main.js文件中将f...

vue.$nextTick 在手机端无法input.focus()

weixin_30273501的博客

04-27

547

<div id="app"> 　　<input ref="input1" v-show="showInput"> 　　<input ref="input2"> 　　<button @click="fn">按钮</button> </div> 　　var app = new Vue({ 　　el:"#app", 　...

五八、移动端input、textarea无法获取焦点

梅某某

02-01

5351

-webkit - touch - callout: none; . 阻止长按图片之后呼出菜单提示复制的行为 -webkit-text-size-adjust: none; . 禁用Webkit内核浏览器的文字大小调整功能。 -webkit-tap-highlight-color: rgba(0, 0, 0, 0); . 避免点击a标签或者注册了click事件的元素时产生高亮 -webkit-

解决 - vue移动端项目在IOS上点击输入框失效，需要点击多次

sunshime的博客

07-19

1023

近期发现项目中关于输入框在ios上点击失效，多次点击才可以获取焦点的问题，一、导致这个问题发生的原因 &emsp;&emsp;是因为我在这个项目种使用了 FastClick ，它的作用是解决移动端延迟300毫秒的问题。当使用FastClick 时，在ios上点击输入框，调取手机自带输入键盘不灵敏，有时候甚至点不出来。而安卓上完全没问题。这个原因是因为FastClick的点击穿透。二、解决方法修改一下 FastClick 的使用代码，如下： FastClick.proto

Vue移动端项目（一）

qq_48687155的博客

08-20

3273

Vue移动端项目

使用scrollTop(）解决IOS中输入法遮挡输入框问题

08-29

在 IOS 浏览器中，当用户点击输入框时，输入法会弹出遮挡输入框，从而导致用户无法正常输入内容。这是由于 IOS 浏览器的输入法机制所导致的。二、传统解决方法传统的解决方法是使用 scrollIntoView() 函数，该...

解决 - 移动端(H5) ios 在点击input输入框,弹起软键盘后,顶部输入框失效的问题

我仰泳一级棒

03-17

2512

问题: 在项目开发过程中发现这个问题,在安卓下是正常的,ios固定定位就会失效,在网上看了许多ios兼容的博客,都没有效果,卡了很久, ios 的软键盘弹出后,会把页面撑高.他就不在原来的位置定位了后面同事提了个思路,当我点击搜索框的时候,会弹出软键盘,往上滑的话,搜索框也会跟着滑走,那我们就在滑动上做文章.往上滑的时候(或者点击屏幕的时候) 让软键盘消失就ok了,那么页面就不会被撑高了 vue开发代码 mounted () { document.body.addEventListener('to

vant 输入框ios端多次点击的问题 100%解决！！！

weixin_43060617的博客

04-20

1189

用vant框架做了个H5问题，在登录的时候就遇到了问题，研究了一下是点击输入框事件问题问题，所以要在index.html 的meta标签修改为 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,viewport-fit=cover" /> 亲测有效，剩下的大小用rem调整一下大小...

vue移动端，解决focus无效、不兼容的问题

柠檬不萌只是酸i

08-03

6733

需求：点击的时候，需要获取到光标闪动。记得vue中有个autofocus自动获取光标的属性，但是这个属性在safari上有问题，所以不可以使用。解决方法： <button @click="toGetFocus()">获取光标</button> <input type="text" placeholder="请输入" ref='Inp' /> to...

解决ios在输入中文时keyup失效的问题

zzz19的博客

09-17

673

场景在vue开发项目中，需要用户提交留资，在输入的内容需要实时更新显示输入的字符数，在原生Dom树中绑定事件@keyup="limitStr($event)".在ios中使用全拼输入法输入中文，在点...

iphone打开vue项目输入框不能获得焦点，也不能输入内容

卡卡西：一个擅长拷贝的前端程序员

09-29

7782

问题描述：使用vue开发的项目，其中有需要输入手机号，验证手机验证码的功能，但是发现iphone打开时，点击输入框，可以调起输入法，但是无法显示输入光标，也不能输入内容（不能获取input框输入焦点）问题产生原因： css样式设置中的某些会产生影响，如-webkit-touch-callout：none；问题解决：检查样式中是否有如下设置 { -web...

input输入框在移动端点击很多次才能聚焦

xiao_yu_liu的博客

11-05

1663

环境：vue+fastclick 问题：在移动端输入框，需要点着输入框很多次，才能将输入框focus；或者长按输入框、或者双击输入框。网络上，都是定位到fastclick，给出的解决办法是覆盖掉fastclick的focus函数，但是，在我的项目中， fastclick是被公共base.js引入的，不能修改，并且也没有挂载到window，所以无法使用该方法。在此提供另外一种思路：给input的外层元素，添加点击事件，在点击事件中，使用nextTick，在其中执行对应input的focus方法

vant2表单组件Field在iOS上校验出错

Liu

09-08

1523

在安卓手机上可以正常校验，但iOS系统无论输入几个字符都会提示错误，原因可能是iOS输入法会输入特殊字符。需要校验用户的输入，长度超出进行错误提示，所以使用了正则表达式进行校验，代码如下。

Ios移动端fastClick导致 input触控不灵敏的解决办法！

草莓味的青

08-25

1299

移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件，这是为了检查用户是否在做双击。为了能够立即响应用户的点击事件，就有了FastClick。安装完发现输入框点击变得不灵敏，第二次点击页面中的输入框需要长按一会才能正常唤起键盘输入。我用的是vue3 这里直接再main.js修改即可！最后再在全局文件添加以下样式。

vue3+vant3 iOS点击输入框，弹出键盘时，页面整体上移如何解决

vue移动端项目在IOS上点击输入框失效， 需要点击多次

vue移动端项目在IOS上点击输入框失效，需要点击多次