Kronos Kronos
首页
导航站
  • 前端文章

    • HTML
    • CSS
  • 学习笔记

    • 《JavaScript》
    • 《ES6 教程》
    • 《Vue》
    • 《TypeScript 从零实现 axios》
    • 《Git》
    • 《MUI》
    • 小程序笔记
  • Nodejs
  • C#
  • 数据库
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
关于
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

Kronos

纵有疾风起,人生不言弃
首页
导航站
  • 前端文章

    • HTML
    • CSS
  • 学习笔记

    • 《JavaScript》
    • 《ES6 教程》
    • 《Vue》
    • 《TypeScript 从零实现 axios》
    • 《Git》
    • 《MUI》
    • 小程序笔记
  • Nodejs
  • C#
  • 数据库
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
关于
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • UI组件

  • 杂记

    • mui主动触发 tap 事件
    • mui 设置方形复选框样式
    • mui 点击 tab 报错
    • mui 获取单选&复选的值
    • modal 弹出效果-从右到左
    • mui滚动条与textarea自身滚动冲突
    • mui输入框防止页面回滚
  • 《MUI》笔记
  • 杂记
Kronos
2023-12-12

mui输入框防止页面回滚

在使用 mui 框架做表单提交的时候,如果表单数据非常多,并且需要 input 输入的,手机端输入框可能就很靠屏幕下方,这个时候输入完成后 input 失去焦点会发现页面会回滚到顶部,再次输入就要重新划拉屏幕,很不方便。

仔细观察会发现每次 input 获取&失去焦点的时候 body 标签会 新增&删除一个类名 mui-focusin 查看源码不难发现就是它导致的这个问题,提供两种方法规避这个问题:

  1. 在 input 获取焦点的时候将 body 中的 mui-focusin 类名移除:

    $("input").on("focus", function () {
        setTimeout(function () {
            $("body").removeClass("mui-focusin");
        }, 10)
    })
    
    1
    2
    3
    4
    5
  2. 直接在 mui.min.js 中搜索以下代码,然后注释掉:

    d.contains(c)&&(d.remove(c),setTimeout(function(){window.scrollTo(b.body.scrollLeft,b.body.scrollTop)},20))
    
    1
编辑 (opens new window)
#mui
上次更新: 2024/11/27, 05:34:36
mui滚动条与textarea自身滚动冲突

← mui滚动条与textarea自身滚动冲突

最近更新
01
使用 API 调用训练后的 DeepSeek
02-10
02
DeepSeek本地训练
02-08
03
DeepSeek本地部署
02-08
更多文章>
Theme by Vdoing | Copyright © 2023-2025 Kronos | 豫ICP备2021038004号-1
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式