JAVA高级面试进阶训练营视频教程

admin

第一步：在标签的输入框中添加获取焦点事件  代码写法： @focus="getFocus" (vue代码)  可直接拷贝拿去放在自己页面元素中，如下：

 <div class="o-field o-grid__cell carinfo-grid__cell">
            <input
              @blur="onPlaceholderMobleBlur"
　　　　　　　　 @focus="getFocus"
              :value="holderMobile"
              class="c-field"
              type="text"
              placeholder="请输入投保人手机号"
              maxlength="11">
          </div>

第二步：在methods 方法中声明 获取焦点事件 如下写法，下面代码直接拷贝即可

 methods: {
    getFocus() {
      $("input,textarea").on("blur", function() {
        window.scroll(0, 0);
      });
    },

这里引入jQuery(jQuery还是很好用的)

实现原理：
      原理就是弹起键盘的时候，window.scrollY会从0变到键盘的高度（例如：200），当输入框焦点失去后让scrollY回到0就好了

或者 这么写只是不需要引入jQuery了

1  window.addEventListener('focusout', function () {
2       document.body.scrollTop = document.body.scrollHeight;
3  })

 

<div class="o-field o-grid__cell carinfo-grid__cell">
  <input
@blur="onPlaceholderMobleBlur"
:value="holderMobile"
class="c-field"
type="text"
placeholder="请输入投保人手机号"
maxlength="11">
</div>