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>
  • 相关阅读:
    java中的变量
    小程序获取设备信息
    小游戏学习1
    live-server
    Babel安装在本地并用webstrom由ES6转Es5
    测试目录
    使用Java模拟一个简单的Dos学生成绩管理系统:
    RabbitMQ——开源稳定的消息队列
    wpf读写app.config中的数据
    C# Arc Gis实例教程——网络链接
  • 原文地址:https://www.cnblogs.com/yangwenbo/p/11028005.html
Copyright © 2011-2022 走看看