我找到了解决这一问题的令人感兴趣的办法。

解决办法是提供隐蔽的投入,并侧重于启动活动。

<input id="backinput" style="position:absolute;top:0;opacity:0;pointer-events: none;">
<input id="input" style="position:absolute;bottom:0;">

利用JQuery:

$( #backinput ).on( focus ,function(e)
{
    e.preventDefault();
    e.stopPropagation();
    const input = document.getElementById( input );
    input.focus({ preventScroll: true });
})
$( #input ).on("touchstart", function (event) {
    if(!$(this).is(":focus"))
    {
        event.stopPropagation();
        event.preventDefault();
        $( #backinput ).focus();
    }
})

最后,重新调整观点,以便自下而上的投入在关键板上移动(如果需要的话)

window.visualViewport.addEventListener("resize", (event) => {
    $( body ).height(parseInt(visualViewport.height));
});

这对我来说是完美的。 我正在建造一个信使。

当关键板被显示或筛选时,底层推进器正在发生变化。 这不是你想要的东西,而是我能实现的最好办法。

下面请看一下我的态度及其用法。

import _ from  lodash 
import { useRef, useEffect } from  react 

export const useFixedPositionWithOpenedIOSKeyboard = (extraBottomOffset = 10) => {
  const elementRef = useRef(null)

  useEffect(() => {
    if (/iPhone|iPad|iPod/.test(window.navigator.userAgent)) {
      const setElementOffsetBottom = () => {
        const screenHeight = document.documentElement.clientHeight
        const screenHeightWithoutKeyboard = visualViewport?.height ?? 0
        const offsetTop = visualViewport?.offsetTop ?? 0

        if (elementRef?.current) {
          const elementStyles = (elementRef.current as HTMLElement).style

          if (Math.round(screenHeightWithoutKeyboard) < screenHeight) {
            elementStyles.bottom = `${
              screenHeight - screenHeightWithoutKeyboard - offsetTop + extraBottomOffset
            }px`
          } else {
            elementStyles.bottom =   
          }
        }
      }

      const debounceElementOffsetBottom = _.debounce(setElementOffsetBottom, 150)
      const showElement = () => debounceElementOffsetBottom()

      window.addEventListener( scroll , showElement)

      return () => window.removeEventListener( scroll , showElement)
    }
  }, [])

  return elementRef
}

......

export const Component = () => {
  const buttonRef = useFixedPositionWithOpenedIOSKeyboard();

  return (
    <>
      <input type= text  />
      <button type= submit  ref={button} style= 
        position: fixed;
        bottom: 40px;
        left: 50%;
        transform: translate(-50%);
        transition: bottom 0.5s cubic-bezier(0.4, 0, 0.2, 1);
       >
        This is Button
      </button>
    </>
  );
}

I adapted the whatwg s answer because it didn t work for my website (I don t know why exacly). I use the property top instead of bottom for the absolute div. My page is a chat, my div contains an input.

在此,我的解决办法是:

// Only for Safari on iOS
// (use interactive-widget=resizes-content to fix Chrome)
if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
    if (navigator.userAgent.indexOf( Chrome ) === -1 && navigator.userAgent.indexOf( Safari ) > -1) {

        // Put the body relative
        document.body.style.position =  relative ;
        let marginTop = parseInt(window.getComputedStyle(document.body).marginTop);
    
        // My toolbar (in my case, a div with an input inside to make a chat)
        myBottomDiv.style.position =  absolute ;
    
        // Events (touchmove on mobile, because the scroll event doesn t work well)
        window.addEventListener("scroll", resizeHandler);
        window.addEventListener("touchmove", resizeHandler);
        window.visualViewport.addEventListener("resize", resizeHandler);
    
        function resizeHandler() {
            myBottomDiv.style.top = (window.scrollY +  window.visualViewport.height - marginTop - myBottomDiv.offsetHeight) +  px ;
        }
    }
}