vux在ios下输入框必须重压或长按才能唤起软键盘

2019-08-14 admin

在做表单时,在pc浏览器中测试正常,在ios移动端测试出现问题。轻击input无法唤起软键盘,无法对输入框聚焦,必须长按或重压才可以。 经过测试,发现应该是fastclick.js 引起的冲突,ios11 后修复了移动点击300ms延迟。

解决方案:

一、在node_module里找到fastClick文件,然后找到focus方法,加一句focus方法即可解决:

FastClick.prototype.focus = function(targetElement) {
    var length;
    if (deviceIsIOS && targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time' && targetElement.type !== 'month') {
        length = targetElement.value.length;
        targetElement.setSelectionRange(length, length);
        // 修复bug iOS 11.3以上不弹出键盘,加上聚焦代码,让其强聚焦弹窗键盘
        targetElement.focus();
    } else {
        targetElement.focus();
    }
};

二、在main.js下加入以下代码:

const str= navigator.userAgent.toLowerCase()
const ver=str.match(/cpu iphone os (.*?) like mac os/)

if (!ver) { // 非IOS系统
  // 引入fastclick 做相关处理
  FastClick.attach(document.body)
} else {
  if (parseInt(ver[1])< 11) {
    // 引入fastclick 做相关处理
    FastClick.attach(document.body)
  }
}

[转载]原文链接:https://segmentfault.com/a/1190000020069345

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-72472.html

文章标题:vux在ios下输入框必须重压或长按才能唤起软键盘

相关文章
Web前端开发与iOS终端开发的异同
毕业之前一直在做前端开发,毕业后就转成做iOS开发,这两者有很多挺有意思的对比,尝试写下我能想到的它们的一些相同点和不同点。 语言 前端和终端作为面向用户端的程序,有个共同特点:需要依赖用户机器的运行环境,所以开发语言基本上是没有选择的,...
2016-01-13
React Native 用JavaScript编写原生ios应用
ReactNative 可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App。而且React Native已经用于生产环境——Facebook Groups iOS 应用就是基于它开发的。 Re...
2015-11-12
三步搞定vue在vscode的环境配置问题
1. vscode基础开发插件 vscode-icons 图标美化 Debugger for Chrome 调试 Beautify 代码格式化 Prettier 代码格式化 ESLint 代码规范 JavaScript (ES6) cod...
2017-12-25
js监听input输入框值的实时变化实例
1、在元素上同时绑定 oninput 和onporpertychanger事件 例: &lt;script type=&quot;text&#x2F;JavaScript&quot;&gt; function aa(e){alert(&qu...
2017-02-16
前端MV*框架的意义
经常有人质疑,在前端搞MV有什么意义?也有人提出这样的疑问:以AngularJS,Knockout,BackBone为代表的MV框架,它跟jQuery这样的框架有什么区别?我jQuery用得好好的,有什么必要再引入这种框架? 回答这些问题之...
2016-03-11
Bootstrap 下拉多选框插件Bootstrap Multiselect
引入文件: &lt;link rel=&quot;stylesheet&quot; href=&quot;css&#x2F;bootstrap.min.css&quot; type=&quot;text&#x2F;css&quot;&#x2...
2017-02-22
HTML5会是下一个风口吗?
2014年10月底, W3C(万维网联盟)正式宣布HTML5正式定稿,科技圈就像发现了可以打破谷歌、苹果所统领的原生APP世界的方法,发表了很多宣讲HTML5将真正开始颠覆原生(Native)App的文章,也开始着力发展HTML5,开始抢占...
2015-11-12
在 Microsoft Azure 中使用 MEAN 堆栈基于开放数据协议
网络开发人员通常构建伟大的应用程序在客户端使用JavaScript和ASP(c#或Visual Basic . NET)在服务器端。 但是如果你能使用一个共同的语言来构建应用程序的所有层堆栈,从浏览器和服务器端业务处理服务层,甚至在数据库查...
2015-11-12
JS中Select下拉列表类(支持输入模糊查询)功能
下面给大家分享一段代码关于select下拉列表类支持输入模糊查询功能的实现代码,具体代码如下所示: &lt;span style=&quot;font-size:14px;&quot;&gt; &lt;HTML&gt; &lt...
2017-03-06
mpvue 小程序如何开启下拉刷新,上拉加载?
https://developers.weixin.qq.com/miniprogram/dev/api/pulldown.html#onpulldownrefresh 小程序API 微信小程序之下拉加载和上拉刷新 微信小程序下拉加载和上拉...
2018-05-25
回到顶部