• 解决ios环境下点击输入框页面被顶起不能自动回弹到底部问题


    第一步:在标签的输入框中添加获取焦点事件  代码写法: @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>
  • 相关阅读:
    bzoj3687 简单题
    bzoj3992 [SDOI2015]序列统计
    bzoj4602 [Sdoi2016]齿轮
    bzoj4006 [JLOI2015]管道连接
    szoj461【四校联考0430】挑战
    bzoj4037 [HAOI2015]数字串拆分
    javascript 节点的增,删,改,查
    javascript 节点属性详解
    表单操作部分
    文档对象的操作
  • 原文地址:https://www.cnblogs.com/yangwenbo/p/11028005.html
Copyright © 2020-2023  润新知