原生js开发 ios手机上 input、textarea失焦后点

2019-06-21  本文已影响0人  八妹sss

问题描述:原生js开发 ios手机上 input、textarea失焦后点击出发的事件不对


image.png

输入框失焦后(软键盘收起)点击班级的热区没反应,点击宝宝学名的热区触发了请求(请求实际上是点击班级的事件),点击title请选择输入框聚焦,由此可见软键盘把元素的热区顶上去了,软键盘收起时点击的热区没下来。

解决原理:

当元素失焦时让元素的点击热区下来即重新定位滚动距离

代码实现

<div onclick="hideMask('class_name_select',event)" class="class_name_select_mask mask">
  <div class="class_name_wrapper">
    <p class="title"><span>请选择</span><span class="icon_close"></span></p>
    <ul class="select_list">
      <li id="name" class="class_name_select">
         <p class="subtitle">宝宝学名</p>
         <p class="cont"><input placeholder="请输入宝宝学名"/></p>
      </li>
      <li id="class" class="class_name_select">
          <p class="subtitle">班级</p>
          <p class="cont class"><span class="empty">请选择班级</span></p>
      </li>
    </ul>
 </div>
</div>
$(function () {
    var scrollY;
    $('input, textarea').on('focus', function () {
        scrollY = window.scrollY;
    });
    $('input, textarea').on('blur', function () {
        window.scrollTo(0, scrollY);
    });
});
上一篇 下一篇

猜你喜欢

热点阅读