jquery移动端键盘隐藏

在移动端网页中,为了让用户可以方便地输入数据,我们通常会使用表单以及输入框。但是,当用户在输入框中输入完成后,键盘并不会自动隐藏,而是会一直占据页面的一部分,影响用户的体验。

jquery移动端键盘隐藏

解决这个问题的方法是使用jQuery移动端键盘隐藏功能。下面是一个例子:

$(document).ready(function() {
  $('input').blur(function() {
    setTimeout(function() {
      var viewportHeight = $(window).height();
      if($(window).scrollTop() > 0) {
        viewportHeight += $(window).scrollTop();
      }
      $('body').height(viewportHeight + 'px');
      window.scrollTo(0,$(window).scrollTop());
    },100);
  });
});

这段代码监听了页面中的所有输入框,并在输入框失去焦点后调用了一个定时器。在定时器中,代码计算了视口的高度,并调整了页面的高度,将其设置为视口高度加上当前页面的滚动高度,这样就能够将键盘隐藏。

需要注意的是,在移动端中,键盘弹出和隐藏的时机是由系统控制的,因此我们需要使用定时器来等待一段时间,以确保页面的高度已经被正确地调整。

以上就是使用jQuery移动端键盘隐藏功能的方法,可以帮助我们提高移动端网页的用户体验。

相关文章

页面搜索关键词突出 // 页面搜索关键词突出 $(function () {...
jQuery实时显示日期、时间 html: <span id=&quot...
jQuery 添加水印 <script src="../../../.....
中文:Sys.WebForms.PageRequestManagerParserErrorExceptio...
1. 用Response.Write方法 代码如下: Response.Write(&q...
Jquery实现按钮点击遮罩加载,处理完后恢复 思路: 1.点击按...