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

tainzhi 发布于2019-08-26 10:46 / 2527人阅读

摘要：在做表单时，在浏览器中测试正常，在移动端测试出现问题。轻击无法唤起软键盘，无法对输入框聚焦，必须长按或重压才可以。经过测试，发现是由于引入移除移动端点击延迟引起的冲突，由于之后修复了移动点击延迟。

**在做表单时，在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)
  }
}

GPU云服务器云服务器输入界面软键盘键盘遮挡输入框 html输入框键盘表单输入框

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106749.html

可能这些是你想要的H5软键盘兼容方案

摘要：然而，并没有直接监听软键盘的原生事件，只能通过软键盘弹起或收起，引发页面其他方面的表现间接监听，曲线救国。软键盘收起表现触发输入框以外的区域时，输入框失去焦点，软键盘收起。可以让软键盘弹起后，让焦点元素再次滚到可视区，强迫滚到位。前言最近一段时间在做 H5 聊天项目，踩过其中一大坑：输入框获取焦点，软键盘弹起，要求输入框吸附（或顶）在输入法框上。需求很明确，看似很简单，其实不然。从...

stackvoid 2019-08-23 17:05 评论0 收藏0
ios输入框的坑(软键盘弹出不灵敏、输入法影响弹出高度)

摘要：参考地址首先，是这样的布局父容器里面放一个输入框和一个按钮思路是父容器定位，为，为布局在其他事件触发输入框出现的时候例如一个评论的，父容器值变为，被软键盘顶上来。参考地址： https://segmentfault.com/a/11...https://blog.csdn.net/github_... 1.首先，是这样的布局：父容器里面放一个输入框和一个按钮思路是：父容器fi...

vvpvvp 2019-08-26 10:56 评论0 收藏0
【CSS练习】IT修真院--练习4-移动端界面

摘要：任务四一个最常见的移动端页面完成的事情完成简单布局，然后填充界面与效果图对比优化完成验收要求扩展性顶栏固定进行样式兼容性研究完成任务四深度思考跟随深度思考师兄建议进行修改输入栏左侧换用输入限制电话位，密码位根据结构的语义化修改尝试下再加一任务四、一个最常见的移动端页面完成的事情完成简单布局，然后填充界面与效果图对比优化完成验收要求：header扩展性 & 顶栏固定进行p...

kun_jian 2019-08-29 15:39 评论0 收藏0
iOS下的 Fixed BUG

input 光标位置乱窜固定式浮层内的输入框光标会发生偏移。即 fixed 定位的容器中输入框光标的位置显示不正确，没有正常地显示在输入框中，而是偏移到了输入框外面 showImg(https://segmentfault.com/img/bVbiJCo?w=750&h=1334); 可触发条件页面body出现滚动条点击页面出现用fixed定位的弹框，弹框内有输入框，键盘弹起，页面发生滚...

Aklman 2019-08-29 17:04 评论0 收藏0