IOS输入框聚焦会把内容区域顶起

熊熊出没  金牌会员 | 2024-10-11 20:32:04 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 782|帖子 782|积分 2346

前几天做了一个类似qq结构的h5的聊天界面，输入框固定在最底下。初始环境会有默认的两条聊天记载，但是当点击底部的输入框时，输入框聚焦，弹起键盘，然后整个界面就被顶上去了，然后那两条默认的聊天记载也被顶上去了，导致整个页面没内容了。
这张图片是初始页面

这张图片是点击输入框之后的样子，发现初始两条聊天内容被顶上去了

这里给出一个demo（如果样式有问题，请将欣赏器的模拟器调到iphone 6/7/8）
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport"
  8.     content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no,viewport-fit=cover" />
  9.   <title>Document</title>
  10.   <style>
  11.     * {
  12.       margin: 0;
  13.       padding: 0;
  14.       box-sizing: border-box;
  15.     }
  17.     html,
  18.     body {
  19.       width: 100%;
  20.       height: 100%;
  21.       overflow: hidden;
  22.       background-color: pink;
  23.     }
  25.     p {
  26.       padding-bottom: 1.875rem;
  27.     }
  30.     .left {
  31.       text-align: left;
  32.     }
  34.     .right {
  35.       text-align: right;
  36.       color: blue;
  37.     }
  39.     .chatContainer {
  40.       height: 100%;
  41.       padding-bottom: 30px;
  42.       overflow: auto;
  43.     }
  45.     .inputBox {
  46.       display: flex;
  47.       position: fixed;
  48.       bottom: 0;
  49.       left: 0;
  50.       right: 0;
  51.       height: 30px;
  52.       z-index: 999;
  53.     }
  55.     input {
  56.       flex: 1;
  57.       margin-right: .5rem;
  58.     }
  60.     button {
  61.       width: 6.25rem;
  62.       height: 100%;
  63.     }
  64.   </style>
  65. </head>
  67. <body>
  68.   <div class="chatContainer">
  69.     <div class="flag"></div>
  70.     <div class="chat">
  71.       <p class="left">你好，我是XXX,一个机器人</p>
  72.       <p class="left">请问您需要问什么</p>
  73.     </div>
  74.   </div>
  75.   <div class="inputBox">
  76.     <input type="text" />
  77.     <button>发送</button>
  78.   </div>
  80.   <script>
  81.     let oBtn = document.querySelector('button')
  82.     let oChatContainer = document.querySelector('.chatContainer')
  83.     let oChat = document.querySelector('.chat')
  84.     let oInput = document.querySelector('input')
  86.     oBtn.onmousedown = (e) => {
  87.       e.preventDefault()
  88.       let inputValue = oInput.value
  89.       if (!inputValue) return
  90.       let oDiv1 = document.createElement('p')
  91.       let oDiv2 = document.createElement('p')
  92.       oDiv1.className = 'right'
  93.       oDiv1.innerText = inputValue
  94.       oDiv2.className = 'left'
  95.       oDiv2.innerText = '感谢您的回复！'
  96.       oChat.appendChild(oDiv1)
  97.       oChat.appendChild(oDiv2)
  98.       let timer = setTimeout(() => {
  99.         clearTimeout(timer)
  100.         oDiv2.scrollIntoView({
  101.           behavior: "smooth",
  102.         })
  103.       }, 100)
  104.       oInput.value = ''
  105.     }
  106.   </script>
  107. </body>
  109. </html>
复制代码
感觉这个好像并没有什么问题，安卓可以正常的表现，交互。但是IOS就是不行，而且我还设置了
  1.   .inputBox {
  2.       position: fixed;
  3.       bottom: 0;
  4.       z-index: 999;
  5.     }
复制代码
让我百思不得其解，，最后发现这是IOS手机的通病，没办法，只能进行hack了。
我的终极解决思绪是，既然聚焦会定顶起内容区域，那么顶起来多少，我就用空缺的元素占位多少高度，如许内容就表现出来了。当手指在屏幕滑动时，再把占位块高度变为0。如果内容区域充足高了，那么就不需要占位了，因为这个时间肯定有内容区域的元素露出来了。
终极的js代码如下
  1. insetPlaceholder(oChatContainer, oInput)
  2. function insetPlaceholder(containerEl, inputEl) {
  3.   /**
  4.    * 只有苹果手机会导致输入框聚焦顶底整个内容区域，
  5.    * 所有这个函数只对IOS系统进行兼容处理
  6.    */
  7.   let isIos = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
  8.   if (!isIos) return
  10.   /**
  11.    * 这里这个是一个死的元素结构
  12.    * 类似这样
  13.    *  <div class="container">
  14.         <div class="flag"></div>
  15.         <div class="content"></div>
  16.       </div>
  17.     *  container是整体，flag是占位元素，根据情况切换高度
  18.     *  content是实际的内容区域
  19.     */
  20.   let oFlag = containerEl.children[0]
  21.   let oContent = containerEl.children[1]
  23.   let firstFocusFlagElHeight = undefined
  24.   // 能够显示出内容的最小高度
  25.   let showInfoMinHeight = undefined
  27.   const onInputFocus = () => {
  28.     /**
  29.      * 记录第一次聚焦的时候，container这个大盒子究竟被顶起来多少，把这个值记录为flag的高度
  30.      *
  31.      * 如果oContent的高度大于700了，那就说明内容足够多了，不需要占位元素顶了
  32.      */
  34.     if (firstFocusFlagElHeight === undefined || (oContent.offsetHeight < showInfoMinHeight)) {
  35.       let timer = setTimeout(() => {
  36.         clearTimeout(timer)
  37.         if (firstFocusFlagElHeight === undefined) {
  38.           firstFocusFlagElHeight = Math.abs(oFlag.getBoundingClientRect().top)
  39.           showInfoMinHeight = firstFocusFlagElHeight + oContent.offsetHeight
  40.         }
  41.         oFlag.style.height = firstFocusFlagElHeight + 'px'
  42.       }, 3e2)
  43.     }
  44.   }
  46.   oInput.addEventListener('focus', onInputFocus)
  47.   /**
  48.    * 监听这个事件主要是为了隐藏那个占位元素
  49.    * 防止用户滑动界面把占位元素露出来
  50.    * 并且很奇怪，如果不这样做，输入框会滚动！并且我已经设置了固定定位！
  51.    */
  52.   const onContainerElTouchstart = () => {
  53.     oFlag.style.height = 0
  54.     oInput.blur()
  55.   }
  56.   containerEl.addEventListener('touchstart', onContainerElTouchstart)
  57. }
复制代码
或者如果你的初始内容充足多，那你也不需要考虑这个问题
这里需要注意的是insetPlaceholder方法传入第一个参数是需要一个特定的html结构的，需要如许的结构
  1. <div class="container">
  2.    <div class="flag"></div>
  3.    <div class="content"></div>
  4. </div>
复制代码
另有两个注意点这里说一下


  1. oDiv2.scrollIntoView({
  2.   behavior: "smooth",
  3. })
复制代码
这段代码用setTimout包裹了，不然动画无法执行（IOS不支持这个方法，只有安卓可以）

  • 这里按钮的点击是监听的mousedown事件，并不是click，主要是为了阻止按钮点击触发输入框的失焦，会导致键盘收起，影响用户体验。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

熊熊出没

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表