首页 > 其他分享 >移动端键盘弹起试页面滚动到底部

移动端键盘弹起试页面滚动到底部

时间:2023-01-07 12:22:44浏览次数:41  
标签:滚动 键盘 底部 container 弹起 页面

问题:输入键盘弹起时会遮盖住底部的内容

解决:增加内容高度,然后页面滚动到底部

<InputItem [content]="'评分'" [type]="'money'" [placeholder]="'满分100分'" formControlName="Score" (onFocus)="scoreFocus()"(onBlur)="scoreBlur()" required>
</InputItem>
<div [ngStyle]="{'height': height}"></div>

 

 

scoreFocus() {
    this.height = '210px';
    // 键盘弹出后-滚动到底部
    setTimeout(() => {
      const container = document.querySelector('.container');
      window.scrollTo(0, container.scrollHeight);
    });
  }
  scoreBlur() {
    this.height = '64px';
  }

 

标签:滚动,键盘,底部,container,弹起,页面
From: https://www.cnblogs.com/tingying/p/17032453.html

相关文章

  • 隐藏Tomcat异常页面中的版本信息,Tomcat服务器版本号泄露
    在Tomcat报错页面中,显示ApacheTomcat/8.5.xx相关版本号等信息,是不安全的。这会被黑客获取到,利用该版本的其他漏洞对服务器进行异常操作,所以需要隐藏掉。需要修改SERVERINFO......
  • 【Android】学习day05|简单登陆页面的实现|监听代码
    实现效果如下图所示    实现代码【部分】MainActivity.java1packagecom.example.app02;23importandroidx.appcompat.app.AppCompatActivity;4......
  • vue3+vite配置多页面
    通过配置多页面应用,从而将给子模块依赖分隔开各自加载,可以减少初始资源的请求,加快页面的访问速度。比如我们有很多H5页面,并且相互独立,比如报修,购卡,计价规则等等,那我们如......
  • 彻底解决springboot修改页面和代码会自动重启
    1.解决修改代码会重启:导入jar包<dependency><groupId>org.springframework</groupId><artifactId>springloaded</artifactId><vers......
  • .net framework4.7.2 不同页面之间的跳转
    首先,我们得新建一个新的.netframework项目,系统会默认生成两个xaml文件,分别是App.xaml和mainWindow.xamlWindow:故名思意,桌面程序的窗体。在WPF桌面应用中,我通常会只用一......
  • 博客园——页面美化
    前言   博客园页面设计Ctrl+c/v版本。目录js权限申请css代码js代码页首代码页脚代码效果图展示 渔夫会扎蛙-博客园(cnblogs.com) 第一步js权限......
  • VUE中的键盘事件(按键别名)
    1.vue中常用的按键别名:回车=>enter删除=>delete(捕获“删除”和“退格”键)退出=>esc空格=>space换行=>tab  //不适合用keyup事件,tab会切走当前选中的......
  • 用pageOffice控件实现 office 文档在线编辑Word 打开文档后在页面里触发事件
    OA办公中,业务需要编辑打开word文档后执行一些js操作怎么实现编辑打开word文档后执行一些js操作呢?2实现方法通过pageOffice实现简单的在线打开编辑word时,通过设置关......
  • 前端关闭页面前发送请求
    需求描述:当用户关闭/刷新页面后,发送请求通知后端监听事件:beforeunload使用axios发送异步请求发现,刷新时后端可以接收到请求,但是页面关闭时后端无法接收请求navigato......
  • 短信/h5页面打开微信小程序实现方案
    实现方式h5跳转小程序需要开启小程序云开发(付费)非个人主体并且已认证的(微信认证)小程序,使用云开发静态网站托管的网页,可以免鉴权跳转任意合法合规的小程序。即可以在微......