强制移动屏幕键盘位置不正确? [英] Force mobile onscreen keyboard to not be position absolute?

问题描述

我正在开发一个聊天程序，它可以在桌面上运行，但是在移动设备上，当您选择文本框并自动打开虚拟屏幕键盘时，屏幕键盘似乎会覆盖自身(类似于消息div上的position:fixed，而不是撞它.

I'm developing a chat and it works on desktop but on mobile when you select the textbox and it automatically opens the virtual onscreen keyboard, the onscreen keyboard seems to overlay itself (similar to position:fixed over the messages div, rather than bumping it.

基本上，消息div应该保留其滚动位置，而不是进行调整.如果您可以看到最新消息，您仍然会看到最新消息.同样，如果您只能看到倒数第二条消息，则在打开键盘后应该可以看到它.

Basically, the messages div should retain its scroll position rather than adjusting. If you can see the latest message, you still see the latest message. If you can only see the second latest message, similarly, after opening the keyboard you should be able to see it.

这是完整的 JSFiddle 演示，用于演示该问题.

Here's a full JSFiddle demo demonstrating the issue.

	window.onload = function(e){ 
		document.querySelector(".messages").scrollTop = 10000;
	}

	function test() {
		document.querySelector(".mobile-keyboard").classList.toggle("show")
	}

	.container {
	  width: 400px;
	  height: 250px;
	  border: 1px solid #333;
	  display: flex;
	  flex-direction: column;
	}

	.messages {
	  overflow-y: auto;
	  height: 100%;
	}

	.send-message {
	  width: 100%;
	  display: flex;
	  flex-direction: column;
	}
  
  .mobile-keyboard {
	display: none;
	height: 100px;
	background-color: #ccc;
  }
  
  .show {
	display: block;
  }

<div class="container">
  <div class="messages">
  <div class="message">hello1</div>
  <div class="message">hello2</div>
  <div class="message">hello3</div>
  <div class="message">hello4</div>
  <div class="message">hello5</div>
  <div class="message">hello6</div>
  <div class="message">hello7</div>
  <div class="message">hello8</div>
  <div class="message">hello9</div>
  <div class="message">hello10</div>
  <div class="message">hello11</div>
  <div class="message">hello12</div>
  <div class="message">hello13</div>
  <div class="message">hello14</div>
  <div class="message">hello15</div>
  <div class="message">hello16</div>
  <div class="message">hello17</div>
  <div class="message">hello18</div>
  <div class="message">hello19</div>
  <div class="message">hello20</div>
  </div>
  <div class="send-message">
	<div class="mobile-keyboard"></div>
	<input />
  </div>
</div>

<button onclick="test()">show keyboard</button>

我认为仅通过编辑HTML和CSS就能完成此操作，但是我无法弄清楚.我更喜欢CSS方法，但也应该使用一种健壮的JavaScript.

I believe this should be able to be accomplished with editing the HTML and CSS only, but I have not been able to figure it out. I'd prefer a CSS approach, but a robust JavaScript one should work too.

该解决方案不应编辑mobile-keyboard的CSS，因为据我所知无法进行编辑.我创建的div替代了真正的键盘，当您选择文本框时，该键盘会自动出现在移动设备上(与常规移动键盘的外观效果相同，因为它不会碰撞内容)

The solution shouldn't edit the CSS for the mobile-keyboard because it is not possible to edit as far as I know. The div I have created there is a substitute for the real keyboard that automatically appears on mobile when you select the textbox (which has the same effect on appearance as the regular mobile keyboard in that it doesn't bump the contents)

推荐答案

调用下面的函数，将滚动元素作为参数传递，可在Android移动设备中使用

calling the function below, passing in the scrolling element as the argument, works in Android mobile devices

function bottomScroller(scroller) {
    let scrollBottom = scroller.scrollHeight - scroller.scrollTop - scroller.clientHeight;
    scroller.addEventListener('scroll', () => scrollBottom = scroller.scrollHeight - scroller.scrollTop - scroller.clientHeight;
    window.addEventListener('resize', () => scroller.scrollTop = scroller.scrollHeight - scrollBottom - scroller.clientHeight;
};

对于iOS-不知道，因为我不使用Apple

As for iOS - not sure, as I don't use Apple

这篇关于强制移动屏幕键盘位置不正确?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！