vue阻止默认_vue中，阻止默认事件

用vue的写法就是：

id="freeinput"

:rows="6"

placeholder="请输入自由条件内容(json格式)"

@focus="add_eventListener"

@blur="remove_eventListener">

methods:{

//在vue项目中，需要将事件监听封装成函数，让this托管，才能生效，所以是这样的写法。

add_eventListener() {

window.addEventListener('keydown', this.keyFun, true)

remove_eventListener() {

window.removeEventListener('keydown', this.keyFun, true)

keyFun(event) {

if (event.keyCode === 9) {

// 阻止默认事件

event.preventDefault();

let ids = " ";

// 获取对应标签

let obj = document.getElementById('freeinput');

// 获取光标的起始位置, 在未做人为选中的情况下, start和end是一样的

let start = obj.selectionStart; // 注意：使用vue对象时，没有selectionStart/selectionEnd属性，所以换成了原生js对象

let end = obj.selectionEnd;

// 获取选中的文本

let text = window.getSelection().toString();

// 如果有换行符, 需要替换, 实现效果同代码编辑器的选中集体缩进

text = ids + text.replace(/\n/g, '\n' + ids);

// 在原始光标位置中插入tab对应的字符

obj.value = obj.value.substring(0, start) + text + obj.value.substring(end);

// 将光标设置到新的位置

obj.setSelectionRange(start + ids.length, start + text.length);

}

vue阻止默认_vue中，阻止默认事件相关推荐

java 修饰符默认_Java中的默认访问修饰符是什么？
Java中的默认访问修饰符是什么? 这个问题在这里已有答案: 什么是默认访问修饰符? 12个答案如果我没有明确说明方法或实例变 ...
ant design vue 的 description组件中 label 默认样式的更改
这两天做项目,需要实现一个如下图的效果于是我就去 ant design vue 里面找,发现 description 组件符合这个效果但是写完之后我发现,这个组件的 label 并不能修改样式啊, ...
vue提示音_vue中使用audio标签进行消息提示
本文实现的功能是:有新的消息更新时,页面会播放提示音,提示的声音会播放15秒,然后停止播放,如果在停止播放之前又有新的消息进来,则会重新计时15秒. 首先,添加audio标签,引入资源文件. 在aud ...
viewer vue 文档_vue中使用viewerjs
项目创建 vue init webpack mytest001 安装viewerjs npm install viewerjs 删掉生成的项目里面的helloWord.vue 修改路由创建一个ind ...
vue滚动条禁止_vue中实现禁止浏览器滚动方法
大家好,本次在开发项目中,点击按钮,弹出一个自定义的弹出窗口和遮罩层,因为页面的超出一屏,有滚动条,但是想让弹出窗时候,禁止浏览器滚动,那么就简单写一个方法给大家. 首先,我们打开我们的txt文本,开 ...
加载vue文件步骤_vue中.vue文件解析步骤详解
这次给大家带来vue中.vue文件解析步骤详解,vue中.vue文件解析的注意事项有哪些,下面就是实战案例,一起来看一下. 我们平时写的 .vue 文件称为 SFC(Single File Compo ...
echarts vue 柱状图实例_VUE中使用Echarts绘制柱状图
在main.js中引入echarts import echarts from 'echarts' Vue.prototype.$echarts = echarts 在相应的vue中导入echarts ...
axios vue 回调函数_vue中ajax请求与axios包完美处理
这次给大家带来vue中ajax请求与axios包完美处理,vue中ajax请求与axios包处理的注意事项有哪些,下面就是实战案例,一起来看一下. 在vue中,经常会用到数据请求,常用的有:vue-r ...
vue数组刷新_Vue中数组更新后，页面没有动态刷新问题
最近使用vue开发时,在一个函数中使用for循环,改变了页面中的数组,在函数中查看是修改成功的,但是页面中没有动态刷新. 在Vue的官方文档有提到这样一个注意事项: 数组变更检测注意事项: 由于 Ja ...

vue阻止默认_vue中，阻止默认事件

vue阻止默认_vue中，阻止默认事件相关推荐

最新文章

热门文章