css - 弹出窗口内的输入字段在聚焦时跳跃-6ren

css - 弹出窗口内的输入字段在聚焦时跳跃

转载作者：太空宇宙更新时间：2023-11-03 21:19:38

我有一个内部有输入字段的 poup。当我使用 iPhone 或 iPad 单击任何输入字段时，布局会跳转...您可以在此链接中看到此效果:https://jsbin.com/zebixifami/1

尝试点击弹出窗口底部的输入字段，您会看到这个问题，这个问题在实际产品中更为突出。

这是编辑器 bin url:https://jsbin.com/zebixifami/edit?html,css,output

这是显示此问题的视频的链接:https://www.youtube.com/watch?v=LvmAl-HQI8Y&feature=youtu.be

HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
</div>
<div class="popup">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
</div>

</body>
</html>

CSS:

.popup {
  position: fixed;
  top: 50%;
  left: 5%;
  width: 90%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  max-height: 90%;
  background: #fff;
  overflow: auto
}

input {
  width: 90%;
  margin-left: 5%;
  display: block;
  margin-bottom: 20px;
  margin-top: 20px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  background: #000;
  oveflow: hidden;
}

最佳答案

原来这是一个webkit bug我们对此无能为力。

但是我确实找到了一个我认为可以接受的解决方法。我最终将弹出窗口保持为没有绝对或固定位置的普通文档流 div，同时在布局和弹出窗口之间跳转，使用户感觉就像在弹出窗口中一样，下面是我所做的分步说明:

当popup被触发时，保存布局的当前滚动位置jQuery('body').scrollTop()。
动画整个页面 opacity: 0(整个布局在一个 div 中，弹出窗口在它之外)。
将布局高度设置为 0 并 overflow hidden 。
在弹出窗口中设置动画(弹出窗口的位置是静态的或相对的)
根据用户所在的位置，我们必须在显示弹出窗口之前跳转到页面顶部。
现在关闭弹出窗口时执行相反的操作。
动画化弹出窗口
将布局高度设置为自动
将布局滚动回我们之前保存的位置。
现在我们可以将布局设置为 opacity: 1 的动画。

这种一步一步的过渡会让用户觉得它是一个弹出窗口，但我们只是隐藏布局并显示另一个类似于弹出窗口的 div。

这样做意味着我们的弹出窗口不再固定位置并且错误不会触发。

演示:JSBIN & Editor

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="wrapper">
  <section>
    <h1>A</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
    <a href="#" class="js-popup-open">Click me.</a>
  </section>
  <section>
    <h1>B</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
    <a href="#" class="js-popup-open">Click me.</a>
  </section>
  <section>
    <h1>C</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
    <a href="#" class="js-popup-open">Click me.</a>
  </section>
  <section>
    <h1>D</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
    <a href="#" class="js-popup-open">Click me.</a>
  </section>
</div>
<div class="popup-wrap"></div>
<div class="popup">
  <a href="#" class="js-popup-close">Close</a>
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
</div>

</body>
</html>

CSS:

body{
  background: #000;
  padding: 0;
  margin: 0;
}
.wrapper{
  background: #fff;
  margin: 0;
  padding: 20px;
}

.popup {
  position: relative;
  top: -5%;
  opacity: 0;
  left: 5%;
  width: 90%;
  max-height: 90%;
  background: #fff;
  overflow: auto;
  display: none;

  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition:  all 0.35s ease-in-out;
  -o-transition:    all 0.35s ease-in-out;
  -ms-transition:   all 0.35s ease-in-out;
  transition:     all 0.35s ease-in-out;
}
input {
  width: 90%;
  margin-left: 5%;
  display: block;
  margin-bottom: 20px;
  margin-top: 20px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.popup-wrap{
  position: absolute;
  background: rgba(0,0,0,0.75);
  top: 0;
  left: 0;
}
.popup-on body {
  oveflow: hidden;
}
.popup-on .popup{
  display: block;
}
.popup-on .wrapper{
  overflow: hidden;
}
.popup-animate .popup{
  top: 5%;
  opacity: 1;
}

JS:

$(document).ready(function(){

  var currentScrollPosition = 0;

  // Open Popup
  $('.js-popup-open').click(function(e){
    e.preventDefault();

    // Save current popup location.
    currentScrollPosition = jQuery('body').scrollTop();

    // Fadeout layout
    $('.wrapper').animate({ 
      opacity: 0
    }, 350, function () {
      // Hide layout
      $('.wrapper').css('height', 0);

      // Show Popup
      $('body').addClass('popup-on');

      // Scroll layout to top so popup is not shown half way through.
      jQuery('html, body').animate({
        scrollTop: 0
      }, 0);

      // Animate Popup
      setTimeout(function(){
        $('body').addClass('popup-animate');
      }, 10); /* this set timeout let transition be applied even when display property was changed from display none to blcok */

    });
  });

  // Close Poup
  $('.js-popup-close').click(function(e){
    e.preventDefault();

    // Animate out the poup
    $('body').removeClass('popup-animate');

    // Wait while popup is animting to fade.
    setTimeout(function(){

      // Hide the popup
      $('body').removeClass('popup-on');

      // scroll to previous position.
      jQuery('html, body').animate({
        scrollTop: currentScrollPosition
      }, 0);

      // Layout back to normal height.
      $('.wrapper').css('height', 'auto');

      setTimeout(function(){
        $('.wrapper').animate({ 
          opacity: 1
        }, 350);
      }, 10);

    }, 360);
  });
});

关于css - 弹出窗口内的输入字段在聚焦时跳跃，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38681809/

文章推荐： python - if 语句中的冷却时间

文章推荐： c# - 在 Razor 中设置枚举下拉列表的默认值

文章推荐： python - 为什么我的轮廓没有被 opencv 完全填充？

文章推荐： c# - 检查 CSV 文件是否为空/避免抛出异常

jQuery 弹出/弹出
我连续有 11 个图像，如果鼠标悬停在其中一个图像上，我希望弹出一个弹出窗口。所以每 11 个图像都有不同的弹出窗口。我已经有一些代码可以执行此操作，但它仅适用于第一张图像。代码:index.htm
cocoa - 弹出 NSColorPanel？
是否可以从 NSColorWell 制作一个 NSColorPanel“弹出”，几乎像一个弹出菜单？我不喜欢它作为调色板的实现方式，因为有时它与哪个 NSColorWell 关联并不明显。谢谢!
cocoa - 弹出 NSStatusItem
我正在考虑一个想法，基本上我想要一个带有 NSPopoverController 的 NSStatusItem 。我读到了人们遇到的所有问题，但我只是想尝试一下。现在有干净的方法吗？我见过的所有版本都
JavaScript 弹出 url
如何获取 JS 打开的弹出窗口的 url。这是我的代码: var _url = 'someurlhere'; var popupwindow = window.open(_url, "Popu
javascript - 如何在新窗口中打开网页(弹出)
我正在设计一个网页，我希望当用户单击链接时，弹出窗口(新窗口)将打开一个链接网页。我的代码如下所示 function win(add,w,h) { window.open(add,"","widt
c - 简单的堆栈，弹出
我正在寻找 C 中的简单堆栈实现，并找到了类似的东西: void pop(struct stack **top) { struct stack *temp; temp = malloc(s
c# - 弹出 - 阻止了带有来源的框架
我正在尝试使用 paypal 实现登录，我有 2 个不同的主机域 1- www.example.com 2- www.example.de 对于 paypal，我需要为此目的选择一个返回 URL，我选
ios - “弹出”查看动画
我正在尝试找出如何复制此处显示的“弹出式” View 动画:https://imgur.com/a/irFqdiP .我正在使用当前代码来显示我的 viewController，但目前只有一个淡入淡出
Windows CDROM 弹出
有谁知道在 Windows 2000 或更高版本上以编程方式关闭 CD 托盘的方法？打开 CD 托盘存在，但我似乎无法关闭它，尤其是在 W2k 下。如果可能的话，我特别想从批处理文件中寻找一种方法来
javascript - 弹出 "over"网页时叫什么？
当您访问http://www.daniweb.com时你得到一个弹出窗口，这叫什么 + 知道怎么做吗？感谢您的回复，只有模态加载动画的最简单方法是什么，即页面加载时动画显示以及动画何时完成？ ASP
c# - 来自过滤器代码的音频点击/弹出
我正在为 Unity 引擎中的音频过滤器创建一个 C# 脚本。我的问题是，在通过我的过滤器运行后，生成的音频具有一致且频繁的“咔哒声”、“砰砰声”或“跳过声”。听起来有点像旧 radio 。我不确
javascript - 隐藏浏览器的地址栏(弹出)
我必须隐藏浏览器的地址栏。我正在使用这段代码: var winFeature = 'location=no,toolbar=no,menubar=no,scrollbars=yes,r
iOS中利用inputView 弹出 picker
推荐一个button 弹起pickerview的源码，也可以作为工具类使用。利用inputview 做键盘弹起动画。该如何做呢？ 1.继承uiview 2.重写属性&方法
excel - 阻止文件现在可用弹出 Excel
我在这里有一个问题，我已经工作了几个小时。我正在导入一个 Excel 文件，并使用此代码来执行此操作: Dim objExcel As Excel.Application Di
iphone - 弹出 UIView 会使应用程序崩溃
我基本上是从 UITableViewController 推送 UIView，它包含的只是 UIWebView。但是，当我删除 UIView 以返回到 UITableView 时，应用程序崩溃了。 -
uinavigationcontroller - 弹出 UINavigationController 时崩溃
我有几个由导航 Controller 控制的 View Controller 。例如，viewController A 和 viewController B 都可以将 viewController
email - 是否有网址打开全屏(弹出)中具有特定邮件ID的Gmail撰写窗口
我使用新的Gmail API为用户创建草稿。 API响应提供了新创建的消息ID。然后，我可以使用URL https://mail.google.com/mail/#drafts?compose=[m
data-structures - Redis列表如何允许索引和恒定时间的左右推送/弹出？
Redis列表实现了哪种内部数据结构以实现这一目的？链表将需要O(n)索引，而数组将需要O(n)左/右推/弹出。最佳答案根据official documentation，它们被实现为linked
WPF 弹出 UI 显示黑色
我正在使用 WPF Popup 控件，它显示背景为黑色。我在其中放置了一个 StackPanel 并设置了 Background="Transparent"，但这没有帮助。
javascript - 弹出 block - jQuery
我希望页面内的容器在事件时占据页面的整个宽度并覆盖在其他所有内容上。这是我目前所拥有的，但它没有按我想要的方式工作: $(function() { $('.main a').click( fu

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

css - 弹出窗口内的输入字段在聚焦时跳跃