Question

在机动装置中,当我打开一页并选择一个投入箱时,虚拟键盘是开放的,我想把这次活动赶上我的工作。

移动浏览器是否界定了任何活动处理方法以实现这一目标?

因此,当钥匙板开张时,我要履行我的习惯职能,在网页上展示/展示一些信使。

成就

Answer 1

First jQuery Mobile does not have any pre-defined event handler for this case. You will need to figure out the way yourself.

<>Android>

When virtual keyboard is open, it fires windows resize event. So you can check if the sum of windows width and height changed to detect keyboard is open or not.

iOS

这不是火上覆,的事件,因此,正如“RamizWachtler”所提到,仅仅要约束着重点和模糊事件。

因此,我在此有几部法典:

您仅将自己的操作代码添加到onKey板OnOff()功能中。

function onKeyboardOnOff(isOpen) {
    // Write down your handling code
    if (isOpen) {
        // keyboard is open
    } else {
        // keyboard is closed
    }
}

var originalPotion = false;
$(document).ready(function(){
    if (originalPotion === false) originalPotion = $(window).width() + $(window).height();
});

/**
 * Determine the mobile operating system.
 * This function returns one of  iOS ,  Android ,  Windows Phone , or  unknown .
 *
 * @returns {String}
 */
function getMobileOperatingSystem() {
    var userAgent = navigator.userAgent || navigator.vendor || window.opera;

      // Windows Phone must come first because its UA also contains "Android"
    if (/windows phone/i.test(userAgent)) {
        return "winphone";
    }

    if (/android/i.test(userAgent)) {
        return "android";
    }

    // iOS detection from: http://stackoverflow.com/a/9039885/177710
    if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
        return "ios";
    }

    return "";
}

function applyAfterResize() {

    if (getMobileOperatingSystem() !=  ios ) {
        if (originalPotion !== false) {
            var wasWithKeyboard = $( body ).hasClass( view-withKeyboard );
            var nowWithKeyboard = false;

                var diff = Math.abs(originalPotion - ($(window).width() + $(window).height()));
                if (diff > 100) nowWithKeyboard = true;

            $( body ).toggleClass( view-withKeyboard , nowWithKeyboard);
            if (wasWithKeyboard != nowWithKeyboard) {
                onKeyboardOnOff(nowWithKeyboard);
            }
        }
    }
}

$(document).on( focus blur ,  select, textarea, input[type=text], input[type=date], input[type=password], input[type=email], input[type=number] , function(e){
    var $obj = $(this);
    var nowWithKeyboard = (e.type ==  focusin );
    $( body ).toggleClass( view-withKeyboard , nowWithKeyboard);
    onKeyboardOnOff(nowWithKeyboard);
});

$(window).on( resize orientationchange , function(){
    applyAfterResize();
});

Answer 2

如window.technologyViewport。



视像室是屏幕的直观部分,其中不包括屏幕上的关键板、脊柱-动物区以外的地区,或带有一页尺寸的透视仪。

我测量了<代码>window. Screen.hala和window. pornographyViewport.h 8 在几个关键板上开放的装置上的区别,并且始终超过300px。

因此,你可以做这样的事情:

const listener = () => {
  const MIN_KEYBOARD_HEIGHT = 300 // N.B.! this might not always be correct
    
  const isMobile = window.innerWidth < 768
  const isKeyboardOpen = isMobile 
    && window.screen.height - MIN_KEYBOARD_HEIGHT > window.visualViewport.height
}

window.visualViewport.addEventListener( resize , listener)

你们应当牢记,这一解决办法在任何情况下都不会奏效,因为它在很大程度上依赖于所有装置键盘的高度大致相同这一假设。当然,你可以夸大硬编码价值,但正如你所看到的那样,这不是一个防弹的解决办法。

Answer 3

不清楚是否具体由j Query运动提供,但在简明的Javascript中,你可以增加一个活动听众,参加<>focus>>>>活动,听取“关键开放板”和<

Answer 4

我猜想你们对我的回答感到谨慎,因为你会做得更好,但这里是:

$(document).on( focus blur ,  select, textarea, input , function(e){
  if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ){
    //your function
  }
  else{
    //the opposite think you want to do
  }
});

Answer 5

https://developer.mozilla.org/en-US/docs/Web/API/VirtualKeyat_API#browser_compatibility”rel=“nofollow noreferer”>browser support ,因为新版,但:

navigator.virtualKeyboard.addEventListener( geometrychange , (event) => {
  const { x, y, width, height } = event.target.boundingRect;
  console.log( Virtual keyboard geometry changed: , x, y, width, height);
});

https://developer.chrome.com/docs/web-platform/virtual-key板/

友情链接