vue 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里面,这样在所需的页面直接引入即可。
原文来之https://www.cnblogs.com/yky-iris/p/10109099.html
vue input聚焦时,滚动至可视区域的更多相关文章
- 移动端,input、textarea滚动至可视区域
1.一般情况下 在移动端,点击input框之后,会弹出输入键盘.而内容input的内容也会自动滚动到可视区域内. 2.当父元素设置了overflow属性之后 在设置了overflow属性之后,点击in ...
- input聚焦时,滚动至可视区域
这里的代码来自vux,觉得vux处理得很好,在此记录一下. 当我们在手机上填表单的时候,我们会希望正在填的input或者textarea会自动滚动至可视区域,方便我们边填写边查看内容.以前我的做法是, ...
- js 判断一个元素是否在滚动的可视区域内,不在就固定到可视区域的上方。
前言:最近工作中,有这样一个场景,判断一个元素是否在滚动的可视区域内,不在就固定到可视区域的上方.为了以后再次遇到,所以记录下来,并分享.转载请注明出处:https://www.cnblogs.com ...
- js滚动及可视区域的相关的操作
element.getBoundingClientRect 判断指定元素相对于页面可视窗口的位置信息,通常结合windows.onScroll方法使用,当element.getBoundingClie ...
- 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 ...
随机推荐
- 转 awk统计nginx每天访问最高的接口
TODAY=date +%d/%b/%Y 获取当天时间awk -v val="$TODAY" ’ $4 ~ val {print $7}’ access.log 打印当天访问的接口 ...
- while语句基本练习(求和思想,统计思想)
A:循环结构while语句的格式: 初始化语句; while(判断条件语句) { 循环体语句; 控制条件语句; } B:执行流程: a:执行初始化语句 b:执行判断条件语句,看其返回值是true还是f ...
- Ubutun13.10下安装fcitx
Ubuntu下自带的Ibus输入法平台并不好用,现在主要使用的是fcitx输入法. 安装fcitx输入法的安装和配置过程如下: 首先卸载掉ibus,输入命令 sudo apt-get remove i ...
- FastReport.net 使用 WebForm 实现打印 最简单版
1.安装demo 2.设计模版 设计器 -->report-->添加数据源-->添加sql查询->起名字(车信息)下一步-->填写sql语句(select top 1 * ...
- elementUI table宽度自适应fit
:fit='true' 或者直接为 fit
- leetcode-7-整数翻转
问题: package com.example.demo; public class Test7 { /** * 整数翻转 123,-123,120等数字 * 思路: * 1.获取原始数字的%10的余 ...
- Python3学习笔记——类
#!/usr/bin/env python #-*- coding:utf-8 -*- #面向对象(类+对象) 三大特性:封装.继承.多态 类的成员: 字段: 普通字段:保存在对象(实例)中,执行只能 ...
- YARN学习笔记
分布式资源调度框架 Yet Another Resource Negotiator YARN 不同框架使用相同的系统资源 YARN的核心组件(架构) ResourceManager RM 整个集群同一 ...
- 【记录】docker 安装redis
docker拉取镜像 docker pull redis docker 启动redis docker run -dit -p 6379:6379 --name redis redis:latest - ...
- OTP Server
OTP Server是一个基于动态口令的身份认证系统,它可以为应用系统提供高安全性的身份认证服务,帮助应用系统提高身份认证的安全性,防止攻击者利用应用系统自身的身份认证安...