Ios Input

1. 收起虚拟键盘，输入框不回落问题

具体业务场景：点击输入框内获得焦点，升起虚拟键盘，点击输入框外部或点击虚拟键盘内的收起按钮收起键盘，输入框仍然卡在原位置未落下。

运行环境：ios11、ios12 webview，使用搜狗输入法
复现代码：

  <div>
      <div style="position: absolute;bottom: 55px;top: 0;left: 0;width: 100%;"></div>

      <input 
        type="text" 
        class='input'
        style="height: 55px;width: 100%;position: absolute;bottom: 0;padding: 0;margin: 0;" />
  </div>

解决方案：（ios12仍然存在概率不回落）

  $('.input').blur(() => {
      $('.input')[0].scrollIntoView({
        block: 'end',
        behavior: 'auto',
      });

      // 成功率较低
      // window.scrollTo(0, window.screen.height)
  });

衍生问题：选择联想时再聚焦输入框时，输入框会下沉一点点，具体见下文。

2. 输入框下沉问题

具体业务场景：输入框内输入文字触发联想功能，点击联想，触发输入框的失焦事件，再将点击的联想内容放入输入框，触发输入框的聚焦事件。

运行环境：ios11、ios12 webview，使用搜狗输入法
复现代码：

  <div>
      <div style="position: absolute;bottom: 55px;top: 0;left: 0;width: 100%;"></div>

      <div id="lenovo" style="position: absolute;bottom: 55px;left: 0;right: 0;z-index: 10;display: none;">
        <div style="background: #f5f5f5;">
          <div class="lenovo_item">aaaaaaaaaa</div>
          <div class="lenovo_item">bbbbbbbbbb</div>
          <div class="lenovo_item">cccccccccc</div>
        </div>
      </div>
      <input 
        type="text" 
        class='input'
        style="height: 55px;width: 100%;position: absolute;bottom: 0;padding: 0;margin: 0;" />
  </div>

  var input = document.getElementsByTagName('input');

  input[0].addEventListener('input', function(e){
      if (e.data) {
        document.getElementById('lenovo').style.display = "block";
      } else {
        document.getElementById('lenovo').style.display = "none";
      }
  });

  $('.lenovo_item').click((e) => {
      document.getElementById('lenovo').style.display = "none";
      $('.input').val($(e.target).text()).focus().triggerHandler("click");
  });

  $('.input').blur(() => {
      $('.input')[0].scrollIntoView({
        block: 'end',
        behavior: 'auto',
      });
  })

解决方案：input.scrollIntoView造成的输入框下沉。失焦的处理逻辑绕过点击联想造成的失焦，因为联想的情形虚拟键盘并不收回，也就没必要做输入框落回底部的操作。(不要使用 $(window).scrollTop(window.screen.height) 代替 scrollIntoView，前一种方式在ios11、ios12偶尔会无效)

  $('.input').blur(() => {
      // 在点击联想的时候，将blurOrigin设置为lenovo，事件不要用click，使用mousedown，确保在blur触发之前
      if (blurOrigin !== 'lenovo') {
        $('.input')[0].scrollIntoView({
          block: 'end',
          behavior: 'auto',
        });

        blurOrigin = '';
      }
  })

衍生问题：选择联想时，输入框会出现抖动现象（第三方输入法），排查原因是ios原生webview 的问题（竞品同样存在该问题）,暂未解决。

3. 输入框升起问题

具体业务场景：点击输入框升起软键盘，输入框部分被软键盘遮挡或不在视口中

运行环境：ios10, ios11.1, ios11.2, ios12.4 webview, 使用搜狗输入法
复现代码：

  <div>
      <div style="position: absolute;bottom: 55px;top: 0;left: 0;width: 100%;"></div>

      <div id="lenovo" style="position: absolute;bottom: 55px;left: 0;right: 0;z-index: 10;display: none;">
        <div style="background: #f5f5f5;">
          <div class="lenovo_item">aaaaaaaaaa</div>
          <div class="lenovo_item">bbbbbbbbbb</div>
          <div class="lenovo_item">cccccccccc</div>
        </div>
      </div>
      <input 
        type="text" 
        class='input'
        style="height: 55px;width: 100%;position: absolute;bottom: 0;padding: 0;margin: 0;" />
  </div>

解决方案1：

  $('.input').focus(() => {
	    setTimeout(() => {
	      	$(window).scrollTop(window.screen.height);
	    }, 200);
  });

ios10 存在概率输入框被第三方输入法挡住的现象，原因是200ms的延迟对低版本较卡顿的手机不够准确，很容易错过键盘完全升起的时机，需要将延迟时间设置为500

解决方案2：

  // 原生通知键盘升起完全后的回调，以保证修正输入框位置的方法时机准确
  callback('keyboardDidShow', () => {
    	$(window).scrollTop(window.screen.height);
  })

keyboardDidShow还能解决软键盘升起时，动态切换软键盘类型造成的输入框被遮挡的问题。

衍生问题1：ios12 原生九宫格输入法在输入框聚焦时，使用$(window).scrollTop()修正输入框位置后，页面元素的点击效果出现错位（页面布局并无错位），之前手动滚动webview造成ios点击效果错位都是使用$(window).scrollTop()来修正的，而本次却是使用了$(window).scrollTop()后造成此情况，目前暂未解决。（支付宝h5客服同样存在此情况）
衍生问题2：ios10 存在输入框先被遮挡，后又出现的现象，暂未解决，目前市面上的产品大多存在此问题

4. 输入框聚焦问题

众所周知，ios下的网页有个特性——不允许JS自动获取input输入框的焦点并调出虚拟键盘，归根结底是聚焦事件的触发源头必须是用户，所以我们不管怎么模拟click再focus都是无效的。

问题描述: 点击聚焦按钮，ios下输入框无法聚焦
详见 ios输入框聚焦问题

待解决问题

使用$(‘.input’)[0].scrollIntoView() 的方法，ios12 输入框仍然存在概率不回落
ios12 输入框内输入问句，选择联想再聚焦输入框时，输入框会出现抖动现象（第三方输入法）
在keyboardDidShow使用$(window).scrollTop(window.screen.height)修复输入框位置后，ios10存在输入框先被遮挡，后又出现的现象
ios12 原生九宫格输入法，输入框弹出时，使用$(window).scrollTop()修正输入框位置后，页面元素触发点击错位