ios手机弹出层上表单的操作,收起键盘焦点错乱的问题

问题

今天遇到了ios手机下 弹出层上form表单 当收起键盘后,焦点错乱,无法再操作的问题

问题原因

Ios收起键盘以后,会对页面进行滚动操作,只需要 window.scroll(0,0)来重置一下就好。

解决办法

function device() {
    const u = navigator.userAgent;
    const isAndroid = u.indexOf(‘Android‘) > -1 || u.indexOf(‘Adr‘) > -1; //android终端
    const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    if (isAndroid)
      return ‘android‘;
    if (isiOS)
      return ‘ios‘;
 }
if(device() === ‘ios‘){
    $("#half input").each(function(){
        $(this).blur(function(){
            window.scroll(0,0);
        })
    })
}

原文地址:https://www.cnblogs.com/cn-oldboy/p/12689012.html

时间: 2024-10-01 04:52:00

ios手机弹出层上表单的操作,收起键盘焦点错乱的问题的相关文章

ios11,弹出层内的input框光标错位 键盘弹出时,输入信息,光标一直乱跳

之前开发了一个微信项目,维护期中苹果手机突然出现光标错位现象,经过排查,发现是最新的ios11系统的锅. 具体情况:弹出层使用position: fixed:弹出层内附带input/textarea输入框,ios11系统的苹果机用户在点击输入框,出现键盘后,弹出层被顶上去,而光标还停留在原处,即出现错位情况. 解决思路: 解决光标错位:弹出层设置为position: absolute:body添加position: fixed; 弹出层重新定位:获取滚动条高度,设置为弹出层Top值: funct

如何修改bootstrap的popover支持鼠标移到弹出层上弹窗层不隐藏

1 设置延时, 超过该延时未移入弹窗则弹窗隐藏 Tooltip.prototype.init = function{中的 var triggers = this.options.trigger.split(' ')后面加上 //设置延时 if (this.options.trigger.indexOf('hover') > -1) { $.extend(true, this.options, { delay: { hide: 100 } }); } 2 控制不消失代码 在Tooltip.prot

JS简易弹出层手机版

简单说明 手机弹出层模枋了WEIUI.弹出层原理还是依照bootstrap 去掉了PC端的ESC关闭.点击背景层时也不默认关闭. 模板样子 CSS样式 /*弹出时给body加上这个,关闭时去掉*/ .overhide { overflow: hidden; } /*关键样式 遮罩层的*/ .msgboxshadow { position: fixed; /*固定定位*/ left: 0; top: 0; right: 0; bottom: 0; opacity: .5; /*背景透明度.这里没有

一组li或者div里面多个弹出层对应各自的内容

今天在一个做一个页面开发的时候发现了这个需求,简单的给大家描述一下我的使用环境: 射鸡师要求点击每一个卡片上的查看更多需要弹出各自的内容: 可能有同学会说了,每个卡片下面写一个div当做弹出层就ok了.从效果上说,这样的方法是可以实现的,但是他存在以下的弊端: 1.代码量臃肿 2.工作量成倍增长 3.不方便维护 ... 我的实现原理和方法: 需要弹出的内容,我直接将他们存在json中去,然后点击的那一个“查看更多”遍历对应的json,将内容插入到弹出中即可,这样也只是需要些一个弹出层div!可能

弹出层详解,从简单到复杂

一.最简单的弹出 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="

wuzhicms上传弹出层,如何返回数据到当前页面?

我们要实现下面功能: 上传图片后,返回图片列表到页面: 点击开始上传后,自动返回结果到页面. 原理:通过openiframe打开上传弹出层. 其中: returntype 在这里是 2 www/res/js/html5upload/extension.js中的 callback_dianping 函数执行返回结果的处理. 再通过:openiframe函数把返回的结果插入到页面.

js制作带有遮罩弹出层实现登录小窗口

要实现的效果如下 点击“登录”按钮后,弹出登录小窗口,并且有遮罩层(这个名词还是百度知道的,以前只知道效果,却不知道名字) 在没有点击“登录”按钮之前登录小窗口不显示,点击“登录”按钮后小窗口显示,并且遮罩层笼罩整个页面,使整个页面的其他元素暂时失去行为. 遮罩层的实现:相对于body绝对定位,宽度和高度都和body相同,并且有一定的透明度,使得下面的元素能够被看到.原先的元素的z-index为0,遮罩层的z-index在弹出登录小窗口和原先元素的之间. 说的不是很清楚,还是看代码吧! <!DO

Jquery学习之路(三) 实现弹出层插件

弹出层的应用还是比较多的,登陆,一些同页面的操作,别人的总归是别人的,自己的才是自己的,所以一直以来想写个弹出层插件.不多废话,直接开始吧! 不想看可以在这里直接下载源码xsPop.zip 1:遮罩层 要弹出层,先要用一个遮罩层挡在下面的页面,此遮罩层是全屏的,页面滚动也要有,所以设置 position: fixed;还要有透明效果,下面是我定义的遮罩层css,取名mask .mask { position: fixed; width: 100%; height: 100%; backgroun

初探弹出层的实现原理

首先用几句话来描述一下实现过程,好有个思路嘛^^:(1)先创建一个div层将整个屏幕罩住(所谓的遮罩层),可设置该层的属性,例如透明度(2)在遮罩层内创建div来展示内容(这里暂时称为内容展示层),在该层就可以灵活的创建个人需要的HTML组件了.例如你在内容展示层中创建了一个iframe,嘿嘿,你就可以请求指定的URL并将其返回的内容呈现在这个iframe之中. 下面就赶紧来看看如何实现吧 1.先上HTML代码 <body> <div>body content</div>