input聚焦时,滚动至可视区域
这里的代码来自vux,觉得vux处理得很好,在此记录一下。
当我们在手机上填表单的时候,我们会希望正在填的input或者textarea会自动滚动至可视区域,方便我们边填写边查看内容。以前我的做法是,获取元素,然后手动设置它距离顶部的高度,这种方法可行,但显得麻烦而笨重。查看了一下vux的源码,发现有一个直接的方法就可以做到这种效果,就是scrollIntoViewIfNeeded,这里分享一下它的写法。
mounted () {
window.addEventListener('resize', this.scrollIntoView)
},
methods: {
// 键盘弹出,页面重绘,将获得焦点的元素滚动至可视区域内
scrollIntoView (time = 0) {
// ios自带调整,所以不管
if (/iphone/i.test(navigator.userAgent)) {
// return
}
if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') {
setTimeout(() => {
document.activeElement.scrollIntoViewIfNeeded(true)
}, time)
}
},
}
简单明了,这里就不做解释了,我们只需知道scrollIntoViewIfNeeded Api的作用,https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoViewIfNeeded,这是它的官方网址。
另外,建议将此方法封装至mixins里面,这样在所需的页面直接引入即可。
input聚焦时,滚动至可视区域的更多相关文章
- 移动端,input、textarea滚动至可视区域
1.一般情况下 在移动端,点击input框之后,会弹出输入键盘.而内容input的内容也会自动滚动到可视区域内. 2.当父元素设置了overflow属性之后 在设置了overflow属性之后,点击in ...
- vue input聚焦时,滚动至可视区域
这里的代码来自vux,觉得vux处理得很好,在此记录一下.当我们在手机上填表单的时候,我们会希望正在填的input或者textarea会自动滚动至可视区域,方便我们边填写边查看内容.以前我的做法是,获 ...
- js滚动及可视区域的相关的操作
element.getBoundingClientRect 判断指定元素相对于页面可视窗口的位置信息,通常结合windows.onScroll方法使用,当element.getBoundingClie ...
- js 判断一个元素是否在滚动的可视区域内,不在就固定到可视区域的上方。
前言:最近工作中,有这样一个场景,判断一个元素是否在滚动的可视区域内,不在就固定到可视区域的上方.为了以后再次遇到,所以记录下来,并分享.转载请注明出处:https://www.cnblogs.com ...
- ztree获取选中节点时不能进入可视区域出现BUG如何解决
zTree 是一个依靠 jQuery 实现的多功能 “树插件”.优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. zTree 的特点编辑 ● zTree v3.0 将核心代码按照功能进 ...
- 取消input聚焦时的边框,去除ios点击时,自动添加的底色效果
/*去除ios点击时,自动添加的底色效果*/ -webkit-tap-highlight-color: rgba(, , , ); /*去除焦点框*/ outline:none;
- js scrollIntoView 滚动到元素可视区域
老是忘记这个函数名,记录一下啊 // 滚动到可视区域 document.querySelector(".loading").scrollIntoView()
- ScrollReveal.js 用于创建和管理元素进入可视区域时的动画效果,帮助你的网站增加吸引力。
ScrollReveal.js 用于创建和管理元素进入可视区域时的动画效果,帮助你的网站增加吸引力. 1.http://www.yangqq.com/jstt/css3/2017-08-08/787. ...
- js检测页面上一个元素是否已经滚动到了屏幕的可视区域内
应用场景:只要页面加载了,其中在页面中出现的li就向控制台输出第几个发送请求:在本次加载的页面中,再将滚动条滚回前边的li,不再向控制台输出东西,也就是说已经显示过的li,不再向控制台输出东西. &l ...
随机推荐
- Ubuntu下安装pip3和Python的第三方库
一.Ubuntu原有环境说明 无论是在服务器上面还是在我们自己的电脑上面,当我们成功安装了Ubuntu系统之后,系统一般情况下会自带Python2.x和Python3.x环境.比如我在自己的阿里云服务 ...
- matlab中size函数总结
size(A)函数是用来求矩阵的大小的. 比如说一个A是一个3×4的二维矩阵: 1.size(A) %直接显示出A大小 输出:ans= 3 4 2.s=size(A)%返回一个行向量s,s的第一个元素 ...
- 第二篇:ssh.invoke_shell() 切换root出现的新问题
接上一篇:按照上一篇的方式,在没有对ssh.invoke_shell()执行后的登录提示符进行判断的话,那边有部分机器就回因为返回为空导致程序卡死. 正常机器 ssh.recv(9999) 命令返 ...
- 关于使用Java开发Mis系统
如何使用Java开发一个小型的信息管理系统,首先我们应该知道要使用什么样的方法. 1.Java基础 2.JSP+Servlet+JavaBean JSP是服务器端的编程语言,见得比较多的是在一些网站上 ...
- 精通SpringBoot---整合RabbitMQ消息队列
今天来和朋友们一起学习下,SpringBoot怎么整合RabbitMQ.目前消息组件大致有三种:.activemq, rabbitmq, kafka.这三者各有优缺点,RabbitMQ相比之下是处于其 ...
- mysql密码正确却提示错误, 不输入密码反而能登录
今天部署阿里云服务器, 发现之前可以连接的mysql服务器突然连接不上了, 密码我确认是正确的,但登录时就是显示密码错误, 很崩溃, 差点气得我就想重装mysql了. 好在经过几番苦寻找到了以下能解决 ...
- Centos7(Linux)下安装VMware12
https://blog.csdn.net/u012605477/article/details/65627234
- BFS:Nightmare(可返回路径)
解题心得: 1.point:关于可以返回路径的BFS的标记方法,并非是简单的0-1,而是可以用时间比较之后判断是否push. 2.queue创建的地点(初始化问题),在全局中创建queue在一次调用B ...
- wget常用下载命令
wget wget是一个从网络上自动下载文件的自由工具,支持通过HTTP.HTTPS.FTP三个最常见的TCP/IP协议下载,并可以使用HTTP代理.wget名称的由来是“World Wide Web ...
- 10 RESTful 实现权限控制
1 2 身份控制 3 4 只能显示5条数据 5 权限控制 序列化渲染深度 6