相关疑难解决方法(0)

据我所知,移动safari在固定元素周围有很多错误,但在大多数情况下,我已经设法让我的布局正常工作,直到我在底部的固定导航中添加了一个非常需要的文本输入.现在,当用户关注文本输入元素并出现虚拟键盘时,我的导航(否则始终固定在页面底部)会跳到页面中间的一个非常奇怪的位置.

我会在这篇文章中添加一些代码,但我不确定从哪里开始.导航固定在底部,位于左侧和底部0,宽度为100%.从那里,我不知道发生了什么,我只能假设它是一个移动的safari bug.

只有当文本输入元素被聚焦并且虚拟键盘打开时,它似乎也会失去它的位置固定并变得相对.

我一直在思考这个问题,我无法想办法解决这个问题.有没有办法检测用户是使用虚拟(软件)键盘还是传统(硬件)键盘？

新的Windows Surface在封面上有自己的键盘,对于Android/iPad,有大量不同的蓝牙键盘.

那么,你们中有人对此有任何意见吗？
我的目标是Android,IOS和Windows平板电脑/手机.

动机:(非常主观)

在开发平板电脑/智能手机的网络应用程序时,我已经认识到在许多情况下使用JavaScript键盘而不是操作系统的软件键盘会更容易.

假设您要输入PIN码.而不是让键盘填满屏幕的一半:

软件(OS)键盘:

|----------------|
|    [ input]    |
|                |
|----------------|
|  1  2  3  4  5 |
|  6  7  8  9  0 |
|----------------|

JavaScript键盘:

|----------------|
|    [ input]    |
|    | 1 2 3|    |
|    | 4 5 6|    |
|    |_7_8_9|    |
|                |
|                |
|----------------|

如果您需要处理大量输入,可能需要对输入进行叠加div并使用软件键盘:

|----------------|
| P1 P2    P3 P4 |
| [inp 1][inp 2] |
|----------------|
|    KEYBOARD    |
|                | …

关于软键盘的讨论很多,但我还没有找到解决问题的好方法.

我有一个调整大小的功能,如:

$(window).resize(function() {
    ///do stuff
});

我希望在所有调整大小事件中对该函数执行'stuff',除非它由软键盘触发.如何确定软键盘是否触发了调整大小？

我有一个网络应用程序.我正在尝试禁用/阻止当您专注于不同的表单输入时发生的滚动(即,当您通过表单中的输入元素前进时发生的滚动).

我已经禁用了滚动:

 <script type="text/javascript">
     $(document).ready(function() {
         document.ontouchmove = function(e){
              e.preventDefault();
              }
     });
 </script>

要添加更多信息 - 我的页面包含一些"幻灯片".每个都是768x1024,它们在页面上"堆叠"(即页面是768x3072 [1024*3 = 3072]),当你点击链接我正在使用scrollTo jquery插件滚动到下一个"幻灯片"并.focus()在输入元素.

有谁知道如何做到这一点？

我一直试图让这项工作好几天,没有运气,所以我想我会分享信息,也许有人想出一个解决方案.

我想在软键盘启动时获得确切的视口大小.我目前在标题上使用以下代码,以便网站响应:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

我意识到当软键盘出现时,它使用设备高度作为视口高度并向上推动站点的其余部分 - 这使我认为它从width = device-width选项获得它的高度.

启动软键盘后使用以下代码:

setTimeout(function() {  
    viewport = document.querySelector("meta[name=viewport]");
    viewport.setAttribute('content', 'height=auto');
}, 300)

然后使用jquery获取高度在Android上显示CORRECT结果 - 也就是可见的视口大小,没有虚拟键盘,但在iOS上没有.我得到一个随机数,我假设源于其余的元标记不存在,所以我得到了网站的放大版本以及75或100之类的数字(在iphone 4s上)

我也尝试在键盘上升后创建一个固定元素,使其使用top:0的视口高度; 和底部:0; 属性,但我仍然得到原始的高度.

更接近这一点的是将视口元标记高度设置为固定值,可以通过jquery获取$(window).height(),这意味着元标记在启动键盘后实际上有所不同,但是对于固定的没有真正的价值高度.

我已经看到很多关于此的主题,但没有一个解决方案.有解决方案吗？

当弹出键盘时,移动safari不会更新window.innerHeight.(至少在9.3.5中,有几个像这样的答案,评论说在ios 8.2中打破了)

苹果文件 说 常说,他们编辑它之前是window.innerHeight会回来与iOS 10.

在iOS 10中,WKWebView对象通过在显示键盘时更新其window.innerHeight属性来匹配Safari的本机行为,并且不调用resize事件.

我需要知道在此期间要做什么来处理iphone safari只是将网站推出视图,而不是调整大小.

我有一个应用程序使用绝对定位的一切,并在页眉和页脚之间有一个溢出的div.

.mainContent {
  position: absolute;
  top: 50px;
  bottom: 28px;
  left: 0;
  right: 0;
}

这里的人物.

截图,在android上按预期工作:

在iphone上没有按预期工作:

根据这个答案,我有一个原生的JS方法来确定iPhone键盘是否打开,

    document.getElementById('chat-input').addEventListener('focus', function(){
      if(/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream){
        console.log("IOS focus");
        var scroll = window.scrollTop;
        window.scrollTop = 10;
        var keyboard_shown = window.scrollTop > 0;
        window.scrollTop = scroll;

        if(keyboard_shown){
          console.log("keyboard");
        }else{
          console.log("no keyboard");
        } 
      } 
    });
  })();

但这实际上并没有解决问题,因为window.innerHeight它没有改变,所以我不知道键盘有多大.我可以列出iPhone的分辨率和键盘高度,只是一个可怕的硬编码人...

可能重复:
iPad Web App:在Safari中使用JavaScript检测虚拟键盘？

我正在为一个网站构建一个移动版本,我很感兴趣,如果我可以使用jquery/js/html5或任何其他技术创建相同的分屏效果,可以在虚拟键盘可见时在移动应用上进行.

例如,如果用户进入我的网页并单击输入文本字段,则会显示虚拟键盘,浏览器会自动缩放到输入文本字段所在的区域.

我想要的是能够根据新的分辨率(屏幕高度 - 键盘高度),通过移动屏幕顶部的输入文本字段,然后根据一些提示,在虚拟键盘可见时更改我的页面内容用户在文本字段中输入的内容.

这是一些草图,看看我在说什么:

这是没有键盘的页面视图,结果基于搜索:

带有纵向键盘的页面,徽标消失,文本输入移至顶部,最多显示4个项目

带有横向键盘的页面,徽标消失,thext输入移动到顶部并放大,只显示2个项目

是键盘是隐藏的,页面应该去faze 1.

希望这可以帮助.

当在iPad虚拟键盘上按下隐藏键盘按钮时,我需要对网页内容进行一些调整.有人知道隐藏键盘时会启动哪个JavaScript事件吗？

我尝试对Web应用程序中的屏幕键盘做出反应.不幸的是,有些事情使这一点变得复杂:

首先,该应用程序必须在移动平台(平板电脑)和台式机上运行.此外,禁止滚动文档/正文并进一步增加趣味,平板电脑必须使用横向模式.

因此,如果有人选择任何输入字段,屏幕上的键盘会打开并阻挡页面一半的视线,因此一些输入变得不可见,我需要更改它.

不幸的是,似乎没有任何事件被触发,这表明应用程序的一半变得不可见.我已经检查过滚动并调整事件大小,但它们也没有触发.

当然,一旦我确定要在平板电脑上,我总会以某种方式做出反应.可能95%的用户无论如何都不会连接硬件键盘.但是,有没有更清洁的方式？

在我的网页中,我有一个文本输入字段,在Windows 8.1平板电脑中被键盘覆盖.

我希望平板电脑能够"推高"网页内容(因为它可以在iPad上运行).

那么:是否有可能使键盘不覆盖我的输入字段？我可以通过javascript检测虚拟键盘是否处于活动状态吗？

我有一个带输入字段的页面.我想在模糊上运行一些javascript代码.像这样,

$('#inputfield').on('blur', function() {
...
});

它可以在桌面浏览器上正常工作,如果我选择标签或在字段外单击鼠标.在iPad Safari浏览器上,如果我在输入字段外点击它,它可以正常工作.

但是,如果我点击左下角的隐藏键盘按钮,则不会触发模糊事件.键盘隐藏不会模糊事件火灾吗？我看到指针/光标远离键盘hide上的输入字段.有没有办法捕捉键盘隐藏事件？

谢谢.

我目前正在尝试在针对Mobile Safari的网页中创建建议UI.主要组件是文本框和滚动列表,显示在包含建议列表的文本框下方.

为此,我需要1)确定键盘已显示,2)确定其大小,以便调整建议列表的大小以适应可用空间.

我已经能够通过等待焦点事件来完成(1),但是(2)仍然存在问题.我无法找到任何方法来测量键盘的大小,因为它似乎不会影响窗口尺寸或我想到的其他任何可以测量的东西.

无论如何,在移动safari中显示iOS键盘的大小时,它是否有规律地确定？