zoukankan      html  css  js  c++  java
  • 解决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>
  • 相关阅读:
    js对象排序
    路由懒加载优化
    RabbitMQ---1、安装与部署
    RabbitMQ入门教程系列
    c#项目代码风格要求
    C#RabbitMQ基础学习笔记
    C# 协变和逆变
    获取当前系统的基本信息
    html制作chm格式开源文档
    WPF: RenderTransform特效
  • 原文地址:https://www.cnblogs.com/yangwenbo/p/11028005.html
Copyright © 2011-2022 走看看