vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果

2024-10-20 03:11:01

最近遇到了之前没有碰到过的一个问题：编辑器输入内容时，最好让内容一直保持在可视区域，比如如果区域超出的话，就在键盘抬起时向上滚动一定距离。

这个和聊天发消息还有一定的区别，聊天的话是只要点开输入框，就将内容定位到最下面：即 dom.scrollTop = dom.scrollHeight即可，但是这个需要移动的是一部分距离，经过讨论最好是让当前光标的位置在键盘抬起时达到可视区域的最上面

那么这个距离肯定是根据光标的距离顶部位置决定的，但是光标距离顶部的距离我并没有度到如何获取，于是就自己瞎摸索，就有了接下来的解决办法

原理是利用的是光标属性可以拿到当前基于该属性的dom结构，就可以通过当前dom距离顶部的offsetTop值判断内容本身在键盘抬起时到底向上滚多少

废话不多说，上代码

let sel = window.getSelection();获取光标的所有属性

通过打印它的一些属性我们可以拿到一些我们所需要的东西（当前dom）

console.log(sel.getRangeAt(0).commonAncestorContainer.parentElement)

这个拿到的就是你当前的dom元素，只需要拿到它的offsetTop即可判断界面到底向上滚动多少

但是有的时候可能当前的属性是个行标签，拿不到offsetTop，那么我们可以找到基于它的父级块标签，我这里的上一级就是块标签，所以只需执行

sel.getRangeAt(0).commonAncestorContainer.parentElement.parentNode.offsetTop

就可以拿到想要的值

再通过

this.$nextTick(() => {
 dom.scrollTop = ket;
 });

这里声明必须在nextTick里进行操作才能更改成功，否则是没有效果的

完整demo

let sel = window.getSelection();
let ket = sel.getRangeAt(0).commonAncestorContainer.parentElement.offsetTop;
if(ket==0){//行标签
 ket = sel.getRangeAt(0).commonAncestorContainer.parentElement.parentNode.offsetTop
}
 this.$nextTick(() => {
 dom.scrollTop = ket;
});

或者通过三元拿值

let ket = sel.getRangeAt(0).commonAncestorContainer.parentElement.offsetTop==0?sel.getRangeAt(0).commonAncestorContainer.parentElement.parentNode.offsetTop:sel.getRangeAt(0).commonAncestorContainer.parentElement.offsetTop;

 this.$nextTick(() => {
 dom.scrollTop = ket;
});

这样试反正我是成功了，这里说一下键盘抬起不抬起不是我判断是，是由app端调用我的方法告知我的，希望小伙伴们不要走弯路....

总结

到此这篇关于vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果的文章就介绍到这了,更多相关vue编辑器键盘抬起内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

Vue+Element使用富文本编辑器的示例代码

富文本编辑器在任何项目中都会用到,在Element中我们推荐vue-quill-editor组件,现在我就把它提供给大家,希望对大家有用.具体截图如下: 安装编辑器组件具体方法:npm install vue-quill-editor --save 编写组件首先我们在components文件夹里创建ue.vue组件,效果图如下: 组件  <template> <div> <script id="editor"
vue集成百度UEditor富文本编辑器使用教程

在前端开发的项目中,难免会遇到需要在页面上集成一个富文本编辑器.那么,如果你有这个需求,希望可以帮助到你. vue是前端开发者所追捧的框架,简单易上手,但是基于vue的富文本编辑器大多数太过于精简.于是我将百度富文本编辑器放到vue项目中使用.效果图如下废话不多说. 1.使用vue-cli构建一个vue项目.然后下载UEditor源码,地址把项目复制到vue项目的static文件下.目的是让服务可以访问到里面的文件,打开UEditor目录文件.这里下载的是jsp版本的.文件名字没有更改过.打
Vue项目中quill-editor带样式编辑器的使用方法

vue-quill-editor默认插入图片是直接将图片转为base64再放入内容中,如果图片比较大的话,富文本的内容就会很大. 插入视频是直接弹框输入URL地址,某些需求下我们需要让用户去本地选择自己的视频,我们可以通过vue-quill-editor内部的某些方法进行更改该方法使用了 element-ui 和文件上传七牛一.npm 安装 vue-quill-editor 二.在main.js中引入 import VueQuillEditor from 'vue-quill-editor
vue2.0 实现富文本编辑器功能

前端富文本编译器使用总结: UEditor:百度前端的开源项目,功能强大,基于 jQuery,但已经没有再维护,而且限定了后端代码,修改起来比较费劲 bootstrap-wysiwyg:微型,易用,小而美,只是 Bootstrap + jQuery... kindEditor:功能强大,代码简洁,需要配置后台,而且好久没见更新了 wangEditor:轻量.简洁.易用,但是升级到 3.x 之后,不便于定制化开发.不过作者很勤奋,广义上和我是一家人,打个call quill:本身功能不多,不过可以
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义

本文为大家分享了Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义,供大家参考,具体内容如下 1.安装 npm install vue-quill-editor --save 2.在main.js中引入 import VueQuillEditor from 'vue-quill-editor' import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quil
轻量级富文本编辑器wangEditor结合vue使用方法示例

1.安装使用npm下载: `npm install wangeditor` 2. 创建实例 (1)基本用法: <template> <div> <div id="editor" class="editor"></div> </div> </template> <script> import E from 'wangeditor' export default { name: 'ed
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果

最近遇到了之前没有碰到过的一个问题:编辑器输入内容时,最好让内容一直保持在可视区域,比如如果区域超出的话,就在键盘抬起时向上滚动一定距离. 这个和聊天发消息还有一定的区别,聊天的话是只要点开输入框,就将内容定位到最下面: 即 dom.scrollTop = dom.scrollHeight即可,但是这个需要移动的是一部分距离,经过讨论最好是让当前光标的位置在键盘抬起时达到可视区域的最上面那么这个距离肯定是根据光标的距离顶部位置决定的,但是光标距离顶部的距离我并没有度到如何获取,于是就自己瞎摸索
原生JS实现列表内容自动向上滚动效果

效果展示 (鼠标移入,滚动停止:鼠标移出,滚动继续) 实现原理 1. html结构:核心是ul > li,ul外层包裹着div.因为想要内容循环滚动无缝衔接,所以在原有ul后面还要有一个一样内容的ul.如下图: (红色边框为可视区域div,此处为了方便查看效果去除overflow:hidden:) 2. 样式方面:由于要滚动,所以必须2个ul的高度 > 外层可视div高度,且div必须设置overflow:hidden; 代码实现 HTML: <div id="revie
Vue Components 数字键盘的实现

本文介绍了Vue Components 数字键盘的实现,分享给大家,具体如下: 项目地址点击查看项目演示点击查看首先监听所有的input,有input聚焦时调起数字键盘,通过getBoundingClientRect判断input位置让数字键盘在input附近,失去焦点后则隐藏数字键盘 let inputElement = document.getElementsByTagName("input"); [...inputElement].forEach(ipele =>
Vue 框架之键盘事件、健值修饰符、双向数据绑定

一.键盘事件,当按键盘时,在控制台输出提示 html 源码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>VueLearn-cnblogs/xpwi</title>  <link rel="stylesheet" href="css/style.css&quo
vue 项目软键盘回车触发搜索事件

目的:掉起来右下角为搜索的按钮步骤: 1.input的type改为search,再写keydown按下时的事件调取搜索事件的方法这样安卓手机上回车就变成了"搜索",不过ios仍然是换行 2.input 外面套form,必须要有action,action="javascript:return true" 我的项目用van:想弹出数字键盘,并监听搜索(换行),在安卓上执行搜索按钮,在ios 执行blur,因为安卓上点完成不执行blur <form @submi
Android软键盘弹出时的界面控制方法

本文实例讲述了Android软键盘弹出时的界面控制方法.分享给大家供大家参考,具体如下: 有时候androidactivity弹出软键盘后布局改变下面有三种模式可以改变软键盘弹出以后的显示形式模式一:压缩模式软键盘弹出以后,会压缩原先的大小我们可以在AndroidManifet.xml中对Activity进行设置.如: android:windowSoftInputMode="stateUnchanged|adjustResize" 模式二:平移模式软键盘弹出以后,不会压缩原先
Android 软键盘弹出时把原来布局顶上去的解决方法

键盘弹出时,会将布局底部的导航条顶上去. 解决办法: 在mainfest.xml中,在和导航栏相关的activity中加: <activity android:name=".filing.MainActivity" android:windowSoftInputMode="adjustResize|stateHidden" /> windowSoftInputMode 属性解释: 活动的主窗口如何与包含屏幕上的软键盘窗口交互.这个属性的设置将会影响两件事
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法

有时候我们需要页面滚动条滚动到某一固定的位置,一般使用Window scrollTo() 方法. 语法就是:scrollTo(xpos,ypos) xpos:必需.要在窗口文档显示区左上角显示的文档的 x 坐标. ypos:必需.要在窗口文档显示区左上角显示的文档的 y 坐标. 例如滚动内容的坐标位置100,500: window.scrollTo(100,500); 好了,这个scrollTop这儿只是简单介绍一下,下面我们介绍下veu-router中的滚动行为. 使用前端路由,当切换到新路由
Vue 实现复制功能,不需要任何结构内容直接复制方式

介绍: 在做复制文档功能时,考虑到是个不太会复用的小功能,最后选择直接用 document.execCommand 方法实现. 在查阅资料时候,发现其他人都需要在页面上写上结构.ID.然后捕捉某个ID获取内容,感觉很不方便. 使用: methods: { copyShaneUrl(shareLink){ var input = document.createElement("input"); // 直接构建input input.value = shareLink; // 设置内容 d
解决vue中使用Axios调用接口时出现的ie数据处理问题

1.问题近期在使用vue2 + axios 调用接口时碰到一个IE中很奇葩的问题,让我头痛了很久. 废话不多扯,就是在其他浏览器中调用接口返回数据然后可以很顺利的进行处理,但在IE(9-11)中发现发送请求是成功的而且也能抓到服务端返回来的数据.却发现在处理返回来的数据的时候处理的有点问题,怎么搞就是不行. 2.处理过程及方法我使用了console大法去解决这个问题,具体是这样的:我先将服务器返回过来的数据打印到浏览器控制台,结果发现都能打印出来,这个时候就郁闷了,明明有数据为何在IE上还是

vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果

相关推荐

随机推荐