在vue项目中,遇到这样一个需求:页面中有好多输入框,在某一个输入框中按Tab键时不触发默认事件,而是变成输入两个空格。
-
这里面有一些注意点
1,vue项目
2,众多输入框中的某一个输入框
3,按下Tab键,事件监听
4,阻止默认事件,变成自定义事件 -
这就有了一个思路:
当焦点在本输入框时,添加事件监听(阻止默认事件,变成自定义的)。
当失去焦点时,移除事件监听(只在本输入框内生效,其他输入框不生效)。
-
用vue的写法就是:
<el-input v-model="ruleForm.extras" type="textarea" style="padding-right:15em;" id="freeinput" :rows="6" placeholder="请输入自由条件内容(json格式)" @focus="add_eventListener" @blur="remove_eventListener"> </el-input>
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); } } }
-
效果图:
处理前按Tab键效果.gif 处理后按Tab键效果.gif
网友评论