我有一个标题输入字段和一个tinymce4文本区域。
在tinymce init中，我定义了blur和focus事件监听器(coffescript)。
tinymce.init(
$.extend {}, tinyMceDefaultConfig,
editor_selector:"tinymce-question"
setup: (editor) ->
editor
.on 'init', (e).....
.on 'focus', ->
console.log('focus')
.on 'blur', ->
console.log('blur')
当我进入tinymce textarea字段时，它只触发focus事件。工作正常。
但是当我从标题输入字段转到tinymce(使用鼠标事件)时，它会触发焦点和模糊事件。
为什么？或者我该如何避免这种情况？更新:
这是一个例子。这是一个错误吗？
当我单击文本区域时，只有焦点被触发。当我在输入字段中然后单击文本区域时，焦点和模糊会触发。
<html>
<head><!-- CDN hosted by Cachefly -->
<script src="http://tinymce.cachefly.net/4.0/tinymce.min.js"></script>
<script>
tinymce.init({
selector:"textarea",
setup: function(editor) {
editor.on('focus', function() {
console.log('focus');
});
editor.on('blur', function(){
console.log('blur');
})
}
});
</script>
</head>
<body>
<input type="text" name="fname">
<textarea>Your content here.</textarea>
</body>
</html>
更新:
焦点现在发射了一次，但模糊不再发射。
更新2:
我明白了，这个问题仅在 Chrome 中出现。在 Firefox 和 Safari 中它运行良好。
更新3:
它已在实际的 Nightly 版本中修复。我不知道它会合并到哪个版本。
最佳答案
<style type="text/css">
.editor_active { border:#f00 2px solid!important; }
.editor_inactive { border:#00f 2px dashed!important; }
</style>
<script type="text/javascript">
tinymce.init({
selector:"textarea",
setup: function(editor) {
editor.on('focus', function(e) {
if(!catching)
{
bounceProtect('focus');
formatMce('focus');
}
});
editor.on('blur', function(e){
if(!catching){
bounceProtect('blur');
formatMce('blur');
}
})
}
});
function formatMce(state)
{
if (state=='focus') {
$('#mceControl').addClass('editor_active').removeClass('editor_inactive');
}
else {
$('#mceControl').addClass('editor_inactive').removeClass('editor_active');
}
}
function bounceProtect(src)
{
catching = true;
console.log(src);
setTimeout(function(){ catching = false;}, 250);
}
var catching = false;
$(document).ready(function(){
$("INPUT,TEXTAREA,BUTTON").focus(function(){ formatMce('blur'); });
});
</script>
</head>
<body style="">
<input type="text" id="fname" name="fname">
<div id="mceControl">
<textarea>Your content here.</textarea>
</div>
更新:1 看起来有分层控件在你身上杂耍焦点 - 这是我们在 VB 应用程序中使用的一种技术，用于防止焦点 war 并避免按键弹跳 - 250 毫秒的延迟应该过滤掉无意的焦点转移，但可以尝试一下。
更新:2 我已将tinyMCE 控件包装在div 中，并向编辑器焦点/模糊处理程序添加了一些代码以设置样式，您不会对IFrame 中加载的内容产生任何影响。
更新:3 文档之间的焦点/模糊有效，但是当您从tinyMCE转到输入控件时，焦点事件没有触发，一个肮脏的黑客是捕获INPUT焦点事件并在编辑器上模拟模糊。
关于jquery - 为什么当用户从其他输入字段跳转时，TinyMCE 会获得焦点和模糊事件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18695916/