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

LinMeng 等级 394 0 0

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

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

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

收藏
评论区

相关推荐

解决ios软键盘收回时屏幕空白问题
添加事件:window.scrollTo(x,y) 在input的释焦事件中添加blur事件, 参数X要在窗口文档显示区左上角显示的文档的 x 坐标。 参数y要在窗口文档显示区左上角显示的文档的 y 坐标。 添加jQuery插件 mounted(){ //解决ios 软键盘弹出屏幕空白 $("input,select,te
html5的input类型(type)和所有属性详解
先总结input的所有属性 required:标记一个字段是否为必须。如果一个字段被标记为required "required"(严格模式下),或者required(宽松模式下)并且这个字段的值为空,或者填入的值是无效值,那么这个表单不能提交。什么是无效值?看pattern属性 pattern:该属性包含了一个JavaScript风格的正则表达式,输
input 获取焦点,键盘遮挡页面
移动端开发中常遇到的就是键盘遮挡问题,下面提供项目中的写法: window.addEventListener('resize', () { const activeElement document.activeElement; if (activeElement.tagName 'INPUT' || activeElement.t
正则表达式限制输入框只能输入数字
1 正则表达式限制输入框只能输入数字 <input type"text" onkeyup"this.valuethis.value.replace(/^d/g,') " onafterpaste"this.valuethis.value.replace(/^d/g,')" name"f_order" value"1"/ 其
Vue中为对象添加属性/this.$set()的使用方法&&Object.assign(target, sources)
this.$set(obj,key,value) 应用场景:为data中的某一个对象添加属性 <template <div <button @click"addProps"添加属性</button {{ hun.name }} <input type"text" vmodel"hun.age" </div </
Web前端开发 HTML设计 经验与技巧总结
小编目前在做毕业设计,主题为“高考志愿信息交流平台”,面向高中生和大学生,辛苦各位读者大佬朋友们填下问卷,点击链接或扫描二维码、微信小程序码均可,希望各位能提供一些调查数据,先在这里谢过各位了(\\^_\^) 1.限制input 输入框只能输入纯数字、限制长度、默认显示文字加入oninput事件oninput "valuevalue
vue--封装后台管理项目通用组件
先看一下我的项目的页面构成 几乎每个页面都是上下结构,上边是筛选条件区域,下边则是表格和分页这里我定义了两个组件:myFilter和myTablemyFilter组件该组件由五部分构成:input输入框、select下拉框、查询按钮、新增按钮、slot五部分构成,它们都是可选的input(通过vif标识可选;由inputName指定标题和默认文本
用Python实现批量高效文件处理 解放你的双手
1.批量修改文件后缀名有时候会有大量修改文件名的需求,比如修改文件后缀、文件名加前缀等,如果手动修改,效率极低,这时候可以使用Python来批量修改:pythonimport osdef file_rename(): path input("请输入你需要修改的目录(格式如'F:\\test'):") old_suffix inp
「小程序 — 云开发」搜索跳转
样式如图:在home.wxml中 js< confirmtype:键盘的右下角按钮显示'搜素'bindconfirm:按下键盘'搜索'按钮bindinput:在输入框输入过程中触发事件bindtap:点击搜索图标<view class"search" <input type"text" placeholder"搜索菜品" con
uni-app入门教程(4)组件的基本使用
@toc 前言本文主要介绍了uniapp中的组件,包括四大类:基础组件(scrollview、swiper、text等)、表单组件(button、checkbox、input等)、导航组件navigator和页面传参、媒体组件(audio、image和video等),详细说明了这些组件的常用属性和方法,并进行使用举例和演示。 一、基础组件组件是视
python刷题-最大最小公倍数
问题描述已知一个正整数N,问从1~N中任选出三个数,他们的最小公倍数最大可以为多少。 输入格式输入一个正整数N。 输出格式输出一个整数,表示你找到的最小公倍数。 样例输入9 样例输出504 数据规模与约定1 < N < 106。 N int(input())Min 1if N<2: print(N)elif N%2
antd table input 失焦的问题
<a name"UYeEu"</a 背景隔壁 zym 同事遇到了一个问题,在编辑表格时,每输入一个字符后都会失去焦点,需要重新点击聚焦后才能继续输入,如图:<br /<br /​<br /<a name"xKS8Z"</a 原因归根结底,是关于 key 的问题。<br /原先的代码中,components 在 render 中,然而在每次 setState
高考后即将分道扬镳,悄悄用python记录下三年情谊的“同学录”
又到了一年的毕业季, 今天就高考的最后一天了,记得当年中小学快毕业时,班上的同学都在相互交换写同学录,一本小小的同学录,装载着都是青春的回忆,或幼稚或成熟的字体,或长或短的语句,或认真或戏虐的毕业留言,让你瞬间回忆起快淡忘的那些人,那些事。毕业在即,我教你用python制作一份独一无二的同学录,留给未来回味,不给青春留遗憾。本文使用的逻辑是利用字典来保存学生
input placeholder信息输入效果
可能经常会在某些新闻或视频网站的搜索框看到类似打字机的效果,咋眼一看好像很简单,但是一些又说不上具体细节,如下图一眼一看,这不动态改变 placeholder 的值就好了吗?仔细看人家还有一个类似光标的东西呢,其实也简单,在拼接的时候再拼接个 | 不就好了吗?代码如下:javascriptconst input document.getElementByI
一文详解:浅谈Android消息机制原理
Message 产生用户滑动屏幕,产生了一系列 input 事件 (一个 Down 事件,若干个 Move 事件,一个 Up 事件),这些事件被系统包装成了一系列 Message(一个 Down Message,若干个 Move Message,一个 Up Message)Message 是用来传递信息的,上述 Message 中就包含了这些 input 事