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 ...
随机推荐
- Python求包含数字或字母最长的字符串及长度
一.求包含数字或字母最长的字符串及长度 org = 'ss121*2222&sdfs2!aaabb' result = [] #保存最终要输出的字符串 result_temp = [] #保存 ...
- System.Threading
线程:定义为可执行应用程序中的基本执行单元. 应用程序域:一个应用程序内可能有多个线程. 上下文:一个线程可以移动到一个特定的上下文的实体 导入命名空间: //得到正在执行这个方法的线程 Thread ...
- 学习sqlserver的函数方法
http://www.w3school.com.cn/sql/func_datediff.asp SQL Server DATEDIFF() 函数 SELECT DATEDIFF(day,'2008- ...
- I am too vegetable to all kill the 51nod problems on level 2 and 3.
51nod level 2:50/51 剩的一个题是切比雪夫距离转曼哈顿距离,现学的,bzoj3710过了,51nod上全wa了,很迷,可能有坑⑧. level 3:62/68 之前有的题有思路但是不 ...
- python之斐波纳契数列
斐波纳契数列 斐波那契数列指的是这样一个数列 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233,377,610,987,1597,2584,4181,676 ...
- 关于poi的坑
背景故事 今天遇上一个坑,关于poi公式计算结果出错的问题,自己打断点debug了半天,虽然没彻底搞清楚为啥不行,但所幸找到了解决办法. 干货 下面不废话,直接贴干货,原先的公式处理代码如下: fin ...
- 如何将emoji表情存放到mysql数据库中
昨晚在爬取猫眼电影评论时在将评论信息插入到数据库中时出现问题,总是在插入一条数据时就会报错: 看着应该时字符编码的问题,比如新建的数据库新建的表,默认字符编码是:Latin1, 这种编码是无法插入中文 ...
- 虚拟机中配置SQL SERVER2008R2远程访问
VM虚拟机中配置数据库访问 选择虚拟机设置--硬件--网络适配器,选择桥接模式:直接连接物理网络 不可选用主机模式(与主机共享专用网络) 数据库远程配置,转自:http://jingyan.baidu ...
- c语言——字符串
char str[] = "http://c.biancheng.net"; char str[] = "http://c.biancheng.net"; ch ...
- poj 2139 奶牛拍电影问题 floyd算法
题意:奶牛拍一系列电影,n头牛拍m部电影,同一部电影种的搭档们距离为1,求最小距离? 思路:Floyd 图 最短路径 存图: 初始化图 for (int i = 0; i <= n; i++) ...