怎么做卖卷网站,做黑彩网站赚钱吗,网络推广需要做哪些工作,济南造价工程信息网前几天做了一个类似qq布局的h5的聊天界面#xff0c;输入框固定在最底下。本来初始情况会有默认的两条聊天记录#xff0c;但是当点击底部的输入框时#xff0c;输入框聚焦#xff0c;弹起键盘#xff0c;然后整个界面就被顶上去了#xff0c;然后那两条默认的聊天记录也…前几天做了一个类似qq布局的h5的聊天界面输入框固定在最底下。本来初始情况会有默认的两条聊天记录但是当点击底部的输入框时输入框聚焦弹起键盘然后整个界面就被顶上去了然后那两条默认的聊天记录也被顶上去了导致整个页面没内容了。
这里给出一个demo如果样式有问题请将浏览器的模拟器调到iphone 6/7/8
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewportcontentwidthdevice-width, initial-scale1, maximum-scale1, minimum-scale1, user-scalableno,viewport-fitcover /titleDocument/titlestyle* {margin: 0;padding: 0;}html,body {width: 100%;height: 100%;overflow: hidden;background-color: pink;}p {margin-bottom: 1.875rem;}.left {text-align: left;}.right {text-align: right;color: blue;}.chatContainer {height: 100%;overflow: auto;}.inputBox {display: flex;position: fixed;bottom: 0;left: 0;right: 0;height: 1.875rem;z-index: 999;}input {flex: 1;margin-right: .5rem;}button {width: 6.25rem;height: 100%;}/style
/headbodydiv classchatContainerdiv classflag/divdiv classchatp classleft你好我是XXX,一个机器人/pp classleft请问您需要问什么/p/div/divdiv classinputBoxinput typetext /button发送/button/divscriptlet oBtn document.querySelector(button)let oChatContainer document.querySelector(.chatContainer)let oInput document.querySelector(input)let oFlag document.querySelector(.flag)oBtn.onclick () {let inputValue oInput.valueif (!inputValue) returnlet oDiv1 document.createElement(p)let oDiv2 document.createElement(p)oDiv1.className rightoDiv1.innerText inputValueoDiv2.className leftoDiv2.innerText 感谢您的回复oChatContainer.appendChild(oDiv1)oChatContainer.appendChild(oDiv2)oDiv2.scrollIntoView({behavior: smooth})oInput.value }/script
/body/html感觉这个好像并没有什么问题安卓可以正常的显示交互。但是IOS就是不行并且我还设置了 .inputBox {display: flex;bottom: 0;z-index: 999;}让我百思不得其解最后发现这是IOS手机的通病没办法只能进行hack了。
我的最终解决思路是既然聚焦会定顶起内容区域那么顶起来多少我就用空白的元素占位多少高度这样内容就显示出来了。当手指在屏幕滑动时再把占位块高度变为0。如果内容区域的高度大于了被顶起的高度或者内容区域的高度多出了被顶起的高度20px之类的那么就不需要占位了因为这个时候肯定有内容区域的元素露出来了。
最终的js代码如下
insetPlaceholder(oChatContainer, oInput)
function insetPlaceholder(containerEl, inputEl) {// 只有苹果手机会导致输入框聚焦顶底整个内容区域所有这个函数只对IOS系统进行兼容处理let isIos !!navigator.userAgent.match(/\(i[^;];( U;)? CPU.Mac OS X/);if (!isIos) return/*** 这里这个是一个死的元素结构* 类似这样* div classcontainerdiv classflag/divdiv classcontent/div/div* container是整体flag是占位元素根据情况切换高度* content是实际的内容区域*/let oFlag containerEl.children[0]let oContent containerEl.children[1]let containerElTouchstartIsRemove false/*** 记录第一次聚焦的时候container这个大盒子究竟被顶起来多少把这个值记录为flag的高度* 以后每次聚焦都会和这个值做比较如果content的高度大于了顶起来的高度那么说明内容已经足够多了所以就不需要flag来占位了然后把 flagEl 高度设置为0*/let isFirstFocusFlagElHeight undefinedconst onInputFocus () {isFirstFocusFlagElHeight undefined (isFirstFocusFlagElHeight Math.abs(oFlag.getBoundingClientRect().top))let insetPlaceholderHeight isFirstFocusFlagElHeight - oContent.offsetHeightif (insetPlaceholderHeight 0) {setTimeout(() {oFlag.style.height insetPlaceholderHeight}, 3e2)} else {if (!containerElTouchstartIsRemove) {containerEl.removeEventListener(touchstart, onContainerElTouchstart)containerElTouchstartIsRemove true}}}oInput.addEventListener(focus, onInputFocus)/*** 监听这个事件主要是为了隐藏那个占位元素* 防止用户滑动界面把占位元素露出来* 并且很奇怪如果不这样做输入框会滚动并且我已经设置了固定定位* 如果占位元素没有了那就可以把这个事件移除了* */const onContainerElTouchstart () {if (oFlag.style.height 0) {oFlag.style.height 0oInput.blur()}}containerEl.addEventListener(touchstart, onContainerElTouchstart)
}或者如果你的初始内容足够多那你也不需要考虑这个问题
这里需要注意的时我的insetPlaceholder方法时需要一个特定的html结构的需要这样的结构
div classcontainerdiv classflag/divdiv classcontent/div
/div
