解决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>
posted @   八十易  阅读(2724)  评论(1编辑  收藏  举报
编辑推荐:
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
阅读排行:
· [翻译] 为什么 Tracebit 用 C# 开发
· 腾讯ima接入deepseek-r1,借用别人脑子用用成真了~
· Deepseek官网太卡,教你白嫖阿里云的Deepseek-R1满血版
· DeepSeek崛起:程序员“饭碗”被抢,还是职业进化新起点?
· RFID实践——.NET IoT程序读取高频RFID卡/标签
点击右上角即可分享
微信分享提示