解决kindeditor中onkeydown不执行的问题
2019-07-23 16:59:40
826次阅读
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
相关话题
- 解决执行脚本报syntax error: unexpected end of file或syntax error near unexpected token `fi'错误的问题
- SImpleImage解决图片压缩变红问题
- Mybatis解决oracle in语句 1000个数限制的问题
- 解决安卓浏览器文本无法垂直居中的问题
- 解决@PathVariable中包含特殊字符异常
- 解决root用户和普通用户的时区不一致的问题
- 解决IE浏览器不支持Spring MVC 文件下载的问题
- DateTimeFormatter替换SimpleDateFormat解决线程安全问题
- vue使用provide/inject方式解决刷新当前页面问题
- 口感醇正的毒鸡汤,不毒不要喝!毒鸡汤锦集二
- 解决手机竖拍照片旋转90度问题
- 解决Spring Boot+AngularJS因为跨域导致Session丢失问题
- Java执行Javascript代码
- java删除字符串中的数字
- 解决Docker内部时区和宿主机不一致问题