解决kindeditor中onkeydown不执行的问题
2019-07-23 16:59:40
903 次阅读
0 个评论
最后修改时间:2019-07-23 17:01:08
最近一个测试的项目使用kindeditor作为前端的编辑器,需求需要当kindeditor生成内容编辑器(比如<input> ,<textarea>标签)得到焦点时,外部使用:
这样绑定的键盘时间会调用不成功,因为kindeditor 生成的html中使用了iframe, iframe中有另外的一个document,使得外部的键盘事件绑定不生效,后续查看kindeditor的api发现,在事件中有这样的描述:
K.ctrl(el , key, fn)
将指定函数绑定到ctrl + [key]组合键事件上。
element el: DOM元素
int|string key: 键名
function fn: 回调函数
参数:
返回: 无
于是在代码中使用:
这样虽然可以捕捉到键盘的行为了,但是始终是必须加了ctrl 键,心里甚是不满 继续深入研究后发现
self.edit.doc
这个是html原生的dom,既然是dom , 就直接用jquery在这再绑定键盘事件:
这样,当焦点还在这个输入的容器中时,只按enter也能激活我的事件。
但是,容器中输入需要换行的时候,由于上面的默认enter换行被我截掉了,所以按enter不行了,使用qq聊天的时候,大家都知道,使用shift+enter是可以换行的,这里我用ctrl+enter换行吧,这样可以直接用kindeditor 中的api,于是才有了最终版
document.onkeydown = function(){...
}
这样绑定的键盘时间会调用不成功,因为kindeditor 生成的html中使用了iframe, iframe中有另外的一个document,使得外部的键盘事件绑定不生效,后续查看kindeditor的api发现,在事件中有这样的描述:
K.ctrl(el , key, fn)
将指定函数绑定到ctrl + [key]组合键事件上。
element el: DOM元素
int|string key: 键名
function fn: 回调函数
参数:
返回: 无
于是在代码中使用:
K.create('.jwolf_input_content', {
...//一堆无关的设置
afterCreate : function() {
var self = this;
K.ctrl(self.edit.doc, 13, function() {
self.sync();
//继续我的enter事件
});
});
这样虽然可以捕捉到键盘的行为了,但是始终是必须加了ctrl 键,心里甚是不满 继续深入研究后发现
self.edit.doc
这个是html原生的dom,既然是dom , 就直接用jquery在这再绑定键盘事件:
K.create('.jwolf_input_content', {
...//一堆无关的设置
afterCreate : function() {
var self = this;
$(self.edit.doc).bind("keydown", 13, function(e) {
e.preventDefault();
self.sync();
//继续我的enter事件
});
});
这样,当焦点还在这个输入的容器中时,只按enter也能激活我的事件。
但是,容器中输入需要换行的时候,由于上面的默认enter换行被我截掉了,所以按enter不行了,使用qq聊天的时候,大家都知道,使用shift+enter是可以换行的,这里我用ctrl+enter换行吧,这样可以直接用kindeditor 中的api,于是才有了最终版
K.create('.jwolf_input_content', {
//无关的一堆,呃,上面说了
afterCreate : function() {
var self = this;
$(self.edit.doc).bind("keydown",function (event) {
if (!event.ctrlKey&&event.keyCode == 13) {
event.preventDefault();
self.sync();
sendMsg();
}
});
K.ctrl(self.edit.doc, 13, function() {
self.sync();
var t = K(self.edit.doc).val();
K(self.edit.doc).val(t+'\n');
});
}
});
00
相关话题
- springBoot动态切换application.properties配置文件
- spring 多数据源一致性事务方案
- mybatis批量插入数据
- MyBatis动态SQL
- Javassist动态修改注解
- vue2 动态组件
- quartz数据库表含义说明
- zTree 获取全部选中节点数据
- Spring Boot指定某个Controller支持跨源请求,以及如何让Controller类某个成员方法支持跨源请求
- Spring Configuration动态绑定bean id
- Fabric.js图形裁切基础介绍
- Fabric.js图形裁切进阶
- mysql mysqldump数据库和表导出语句
- Fabric.js实作: 自订图片裁切
- MySQL5.7多主一从(多源复制)同步配置