input 获取焦点,键盘遮挡页面

LinMeng 等级 649 0 0
标签: 前端

移动端开发中常遇到的就是键盘遮挡问题,下面提供项目中的写法:

window.addEventListener('resize', () => {
  const activeElement = document.activeElement;
  if (activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA') {
    setTimeout(() => {
      activeElement.scrollIntoView();
    }, 100);
  }
});

注意:该部分代码是原生部分,在VUE中不应放在任何函数中,直接写在 script标签中即可

收藏
评论区

相关推荐

antd table input 失焦的问题
<a name"UYeEu"</a 背景隔壁 zym 同事遇到了一个问题,在编辑表格时,每输入一个字符后都会失去焦点,需要重新点击聚焦后才能继续输入,如图:<br /<br /​<br /<a name"xKS8Z"</a 原因归根结底,是关于 key 的问题。<br /原先的代码中,components 在 render 中,然而在每次 setState
PHP 表单
### 1、一个简单的 HTML 表单 POSt方法 包含两个输入字段和一个提交按钮 <html> <body> <form action="welcome.php" method="post"> Name: <input type="text" name="name"><br> E-mail: <input ty
PHP自定义 日期范围 条件筛选
Html: <div class\="layui-inline"\> <label class\="layui-form-label"\>登录时间:</label\> <div class\="layui-input-inline" style\="width: 140px;"\> <input type\="date" name\="date
HTML5的表单input元素的新属性
        知识点 《HTML5的表单input元素的新属性》,留待学习分享。。。 <!-- HTML5的表单input元素的新属性 Autocomplete:自动完成功能 Autofocus:自动获取焦点 Form:所属表单 Required:必填 Pattern:验证input的模式 placeholder:提示 \-->
18 个 JavaScript 入门技巧!(含2020JavaScript面试题整理)
1\. 转字符串 -------- const input = 123; console.log(input + ''); // '123' console.log(String(input)); // '123' console.log(input.toString()); // '123'
301. Remove Invalid Parentheses去除不符合匹配规则的括号
[抄题]: Remove the minimum number of invalid parentheses in order to make the input string valid. Return all possible results. Note: The input string may contain letters other than
Bootstrap 手风琴搭配导航条实现常用菜单栏
效果 == ![](http://static.oschina.net/uploads/img/201606/22000049_821N.png) HTML代码 ====== <div class="sidebar"> <div class="mc-search"> <div class=
From表单提交的几种方式
<body> <form action="https://my.oschina.net/u/3285916" method="get" name="formOne" id="formId"> name:<input type="text" name="name"> pwd:<input typ
HTML5新增input标签属性
一. input type属性 1 <form action=""> 2 邮箱<input type="email" name="" id=""> <input type="submit" value="提交"><br /><br /> 3 手机号码<input type="tel" name=
Iptables简单的使用
清除已有iptables规则 iptables -F iptables -X iptables -Z 拒绝一切连接 iptables -P INPUT DROP \# 允许访问22端口 iptables -A INPUT -p tcp --dport 22 -j ACCEPT 将所有iptables以序号标记显示,执行: iptables
Jquery中prop( )和attr( )的区别和用法
###  1.碰到的“坑” <label> <input type="checkbox" class="check-box" id="apple">苹果 <input type="checkbox" class="check-box" id="banana">香蕉 <input type="checkbox" clas
Python——Day1(笔记代码)
#print('Hello World') """ n1=input('请输入用户名:') print(n1) n2=input('请输入密码:') print(n2) """ """ n1 = "alex" n2 = "root" print(n1+'\\t'+n2) print(n2) """ """
Python中的raw_input()和input()
raw\_input()和input()都是python中的内建函数,用于读取控制台用户的输入,但有所区别: ------------------------------------------------------ [nr@localhost conf]$ python Python 2.7.5 (default, Aug 4 201
ReactNative遇到的坑总结(持续更新)
**问题:在Android中 input组件,文字会有遮挡** 在Android中,input组件默认会有内边距,所以把padding改为0可以解决问题 **问题:在Android中 input组件,底部会有条白线** 添加红色的属性underlineColorAndroid > <TextInput > > placeholder="搜索关键字"
vue 纯数字input
最近项目中需要实现一个元和分的转换,要求存储使用分,显示使用元。意外发现了一个实现input 只能输入纯数字的方案 * * * computed: { money: { //pay-content组件金额以分为单位,当前组件以元为单位,因此需要转换 get() {